Advanced Form Processing with PHP and Javascript

Intended Audience
Prerequisites
Introduction
What Is Javascript, and What Is Not
Utilizing Javascript to Reduce Traffic
What if Javascript has Gone Away?
Passing Data From PHP To Javascript
Using Regular Expressions
Tips & Tricks (Processing)
Tips & Tricks (Designing Form)
Sample Codes
Conclusion

Intended Audience

This article is intended for intermediate level PHP programmers, who know how to use web forms to gather data, and how to communicate with database systems or filesystem to store the data, but are unaware or uninformed about the inspection process between these two steps.

Prerequisites

• Basic understanding of HTTP.
• Basic command of Javascript.
• Experience with HTML form elements.

Introduction

When building a web site, sooner or later you will need a form. Forms are the best way of gathering data from visitors. Your forms can be as small as a login form, or as large as a membership subscription form asking for lots of input. Obviously, the bigger the form, the more information there is to process, and the greater the challenge.

When inspecting form data, the two most important issues you have to worry about are intrusion,and gathering as much useful data as possible from your visitors. Although these issues appear to lay on just opposite sides - you want to collect lots of data, but you have to put restrictions against intruders - it is actually possible to do both. By taking a few precautions you can eliminate 95% of intruders while forcing visitors to supply the data you want.

You have tools for optimization of form’s inspection process, both client side and server side. Client side, the most important of themtools are scripting languages, particularly Javascript. Utilizing Javascript, you can limit and check form data while it’s still on the client side.

On the server side, you need nothing but PHP. But, you should be aware that some common coding mistakes in PHP may become deadly. Have a look at zend.com’s articles titled Coding Mistakes Part I, II, III for more details.

What Is Javascript, and What Is Not?

Javascript is popular client side scripting language used for controlling objects on the web page. It’s code is embedded and sent to the client’s browser in the HTML. As long as the client does not make a new request from the server, Javascript will stay and run on the client. In the same way, Javascript’s effects stay on the client side until submission to the server. That’s why it’s client-side. And you cannot access client machine’s resources like filesystem or data sources. That’s why it’s called scripting language, not programming. Javascript deals with objects on the web page only.

Javascript is NOT a security tool. Since your source is sent to the client, who can talk about security? Javascript is used simply to save server bandwidth. “Client-side scripting” and “security” are a contradiction in terms.

Rules are well and fine so long as people obey them. Javascript sets rules for users without any evil intention. But, an unscrupulous and knowledgeable intruder won’t mind breaking a few rules in an effort to find a gate which you forgot to close.

Utilizing Javascript to Reduce Traffic

Javascript is capable of controlling HTML objects on a page, including form objects. You can minimize network traffic between server and client by utilizing Javascript as a pioneer.

Consider this case: You have a web page including a form with username and password fields, and both cannot be shorter than 6 characters. You have two alternatives: Let Javascript check this constraint first, client side, then have PHP take over, server side; or have everything dealt with by PHP server side. Evaluate the pseudo alternatives when user entered 5 characters in username field:

Javascript + PHP Server sends HTML including Javascript to client. Client fills out form. Javascript checks form and warns user. Client corrects form. Client sends form back to server.

PHP Server sends HTML to client. Client fills out form. Client sends form back to server. PHP checks form and finds error. Server sends HTML and error message to client. Client corrects form. Client sends form back to server.

There are two steps (1,5) causing traffic between server and client when Javascript is utilized before PHP, while there are four (1,3,5,7) with PHP only. (See sample code 4 for this example’s source.)

Does server workload matter when utilizing Javascript? As for PHP’s CGI nature, every time your script called, an instance of php’s executable is created, using up memory and processor resources. As the execution finishes, the file dies and resources get freed. Executing a few PHP script won’t usually overload the server unless there are huge numbers of php instances running at the same time. The time taken to execute PHP scripts is measured in miliseconds, and you can observe resource consumption using Task Manager (on Windows platforms), or the command ps –ef | grep php (on Unix platforms).

You should take server performance into account,

• When you’re expecting hundreds of visitors online at the same time
• When you have very limited server resources (for hardware, hosting etc. reasons)

If you choose average web server software and hardware, performance is not an issue. Therefore, Javascript makes no difference to your server’s workload. The biggest factor affecting on your site’s performance is still bandwidth.

What if Javascript has Gone Away?

Although it’s can’t be claimed that Javascript is available on every browser, certainly every modern browser supports it. However, even with modern browsers, scripting can be manually disabled for security reasons. What happens if Javascript is not enabled, or is circumvented in any way, or if someone sent data by hand instead of filling out your form?

When coping with form processing, you have to ensure that,

• the form is displayed on the client browser and filled out,
• Javascript has gone over the form, and checked that no error occured.

If the client browser does not support Javascript, the form will also be displayed, but JS procedures won’t be included. Against these non-JS enabled (or purposely disabled) browsers, you can use the <NOSCRIPT> HTML tag. This tag specifies HTML to be displayed in browsers that do not support scripting. Using this tag, you will exclude users with very old fashioned or text-based browsers, plus those who manually disabled scripting.

A second thing to remember: Do not use a SUBMIT type for the button which submits the form:

<INPUT TYPE="submit" VALUE="OK" onClick="check_form(this);">

If you do, the form will be submitted regardless of your JS procedure’s return value(s). It’s better to use a BUTTON object and set it’s onClick event to a related JS function:

<INPUT TYPE="button" VALUE="OK" onClick="check_form(this);">

This will call the associated Javascript function to check the form, and this function will submit it only if no error occured.

To ensure that the form is ‘really’ filled out, rather than sent by another application or manually, you may use a noisy image created online as a form checking technique. (See the sign-up page on hotmail.com). Zend.com has a tutorial on Securing Forms with Noisy Images.

!   To prevent any kind of intrusion, your best companion is always PHP. Even though you have utilized Javascript, never skip checking data with PHP. This is the most reliable checkpoint before processing input.

Passing Data From PHP To Javascript

Sometimes you may need to use some data back on client side. There are 2 ways of passing data from PHP to Javascript. The first way is directly adding PHP code in the <SCRIPT> tag, appropriate to Javascript syntax:

<?php    
$user_id = $_GET["uid"];
?>
font color="#007700"><SCRIPT LANGUAGE="Javascript1.2">
    var user_id = <?php echo($user_id);?> ;
    alert("Your user ID is:" + user_id);
</SCRIPT>

A second, similar, way is to insert a HIDDEN type input field into the page, and set it’s value with PHP. Javascript is able to access this element’s value.

<?php    
$user_id = $_GET["uid"];
?>
<SCRIPT LANGUAGE="Javascript1.2">
    //You can directly access an object's value with id.
    alert("Your user ID is:" + p2j.value);
</SCRIPT>

<BODY BGCOLOR= "#FFFFFF">
<INPUT TYPE= "hidden" ID= "p2j" VALUE="<?php echo( $user_id);?> ">

Using Regular Expressions

When processing form input, you often have to perform complicated operations on strings. Regular expressions, or regexp in short, are a powerful way of specifying complex string search and modifications. Regular expressions are available in almost every environment. From PHP to Javascript, or MySQL to Unix itself. Though regular expressions have different implementations, their general logic is similar. For further information about using regular expressions in different environments, consult related documentation.

Normally regular expressions need more resources to run, but they let you easily check and modify very complex strings in just a couple of lines, which would otherwise require lots of flow control blocks (if..else, switch etc.) to perform the same actionYeap.. That’s why it’s logical to use them. On the other hand, excessive usage of regular expressions overburdens your server. Thus, determining when to choose regexp is important.

In PHP, two types of regular expression are available: Perl compatible and POSIX 1003.2. Perl compatible regular expressions have number of advantages over POSIX. (Refer to related documentation for further information on regular expressions.)

In Javascript, creating regexp objects is very similar to creating string variable definitions. If you begin and end with slashes, then the variable will be stored as a regexp object and will be eligible for regexp methods like compile, exec, match, test, replace. Another way is creating an instance of theYes, it’s a specific class name in Javascript. RegExp object.

The syntax of string testing in Javascript is like

regexp.test(string);
Where regexp represents the regular expression, and string is the string that this test is going to made on. The test method checks to see if a pattern exists within a string and returns Ttrue if it does, and false otherwise. (See sample code 3.)

Tips & Tricks (Processing)

When evaluating a user’s input, length is not the only criterium you have to check. Remember that a space is also counted as a character. For better auditing;

• Replace multiple spaces with a single space using replace regexp . This is even more important when you explode the input into an array, using space as delimiter. Multiple spaces will result in keys with empty values on the resulting array. (See sample code 1 and 2.)
• Trim string inputs before using them in comparisons. Javascript has no trim function. See function below. (See sample code 5.)
• Check the data types of fields. PHP has very useful functions for this purpose: is_numeric(), is_string(), is_integer() etc.
• Quotes and some other special characters (percent sign, underscore, semicolon etc.) may cause problems on SQL commands. Since JS has no similar function, you’d better use PHP’s addslashes() function before querying SQLs. This function adds slashes as an escape character for those special characters, including null. Not only characters, but some keywords are reserved and meaningful for databases systems. Like CREATE, DROP, ALTER, DELETE, GRANT, REVOKE.
• As a global programming rule, try to handle all exceptions in code and never let PHP show an error message. Some error messages may reveal key information (like physical paths) to intruders. You can also display messages like different system messages to confuse novice intruders, such as:

$db_conn = @mysql_query('localhost', 'u', 'p') or die('ADO Connection Error 0x80000922: Microsoft Jet Engine couldn\'t be started'); // What the heck ADO is doing there J?

$recs = @mysql_query($sql, $db_conn) or die ('ADO Recordset Error 0x800A0BCD: Either BOF or EOF is True, or the current record has been deleted. Requested operation requires a current record.');

• Receiving data with a method that you don’t expect indicates an intrusion attempt. Unexpected variables are not funny either. Prefer using $_POST[‘Variable’] syntax instead of $Variable or $_REQUEST[‘Variable’]. Specify which method are you expecting data in. Occasionally you may actually expect more than one. If that is the case, put them in order:

// If POST data is set, use it, otherwise use GET data.
$name = isset($_POST['name']) ? trim($_POST['name']) : trim($_GET['name']);

• If a checkbox is not checked, the isset() function will return false when processing. Therefore, before checking the value of a checkbox, always check if it’s set.

if (isset($_POST['read_licence_aggreement'])) {
    if($_POST['read_licence_aggreement']== "Y") {
            echo "User has accepted licence aggreement.";
    }
}

Tips & Tricks (Designing Form)

• Always include MAXLENGTH attribute in text fields to limit the size of field. This will save your script from an unexpected error.
• If you want a field’s value to be displayed but without allowing the user to change it, use READONLY boolean attribute set and also set it’s TABINDEX attribute’s value to -1. (Using HIDDEN type of input will not display this field on form.)

<INPUT TYPE="text" NAME="price" READONLY TABINDEX="-1">

• If you place multiple checkboxes on a form with the same name, PHP will accept only the value of the last check box (in source order). In case you need all the values as an array, put brackets “[]” (without quotes) after NAME attributes of each one. (See sample code 6.)

Sample Codes

1. Replacing strings using regular expressions in PHP.

   <?php
// This command will replace multiple spaces with a space.
$result = ereg_replace("\s+", " ", $_POST['sentence']);
echo('Old String:'.$_POST['sentence'].'\n');
echo('New String:'.$result.'\n');
?>

2. Replacing strings using regular expressions in Javascript.

   <SCRIPT LANGUAGE="Javascript1.2">
var r, re;

//String to be checked.
var s = "23th  University  Summer  Olympic  Games   is  going  to  be  organized  by   city  of  Izmir  in  2005.";

// Regular expression. Masks at least 1 space on global scope.
re = /\s+/g;

// Replace space(s) with a space.
r = s.replace(re, " ");

//See the results
alert("Old string:\n"+s);
alert("New string:\n"+r);
</SCRIPT>

   Note: Do not forget to add “g” (global search) after the regular expression’s closing slash, if you want to replace ALL matches. Otherwise, the replace function will only replace the first match.
3. Matching strings with regular expressions in Javascript.

   <SCRIPT LANGUAGE="Javascript1.2">
// First way of defining regular expressions
// See parameters after second slash?
// i: ignore case g:global search
// This regexp means exact 5 numeric characters
var re_zip1 = /[0-9]{5}/ig;

// ...and second.
var re_zip2 = new RegExp("/[0-9]{5}/", "ig");

// Testing. Attention please.
alert(re_zip1.test("35140"));  // true. All numeric and 5 digits
alert(re_zip1.test("3510"));   // false. All numeric but 4 digits.
alert(re_zip2.test("a5140"));  // false. 5 digits but not all numeric.
</SCRIPT>

4. Common HTML and Javascript source checking the form before submission.

   <HTML>
<HEAD>
    <TITLE>Sample Form</TITLE>
</HEAD>

<SCRIPT LANGUAGE="JavaScript1.2">
    // Form object
    var f=document.forms(0);
    // Boolen to track if error found
    var foundErr;
    // Form element index number which the first error occured.
    var focusOn;
    
    function check_form() {
        foundErr = false; focusOn = -1;
        // Username field must be at least 6 chars.
        if (f.user.value.length<6) {
            alert ("Username too short.");
            foundErr = true; focusOn = 0;
        }
    
        // Password field must be at least 6 chars.
        if (f.pass.value.length<6) {
            alert("Password too short");
            foundErr = true;
            if (focusOn==-1) focusOn=1;
        }
    
        //Has any error occured?
        if (foundErr) {
            //Yes. Focus on which the first occurred.
            f.elements.focus(focusOn);
        } else {
            // No. Submit the form.
            f.submit();
        }
    }
</SCRIPT>

<BODY BGCOLOR="#FFFFFF">    
    <FORM ACTION="check.php" METHOD="post">
    <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
        <TR>
            <TD WIDTH="30%" ALIGN="right">Username</TD>
            <TD WIDTH="70%">: <INPUT TYPE="text" NAME="user"></TD>
        </TR>
        <TR>
            <TD ALIGN="right">Password</TD>
            <TD>: <INPUT TYPE="password" NAME="pass"></TD>
        </TR>
        <TR>
            <TD>&nbsp;</TD>
            <TD><INPUT TYPE="button" VALUE="Submit" onClick="check_form();"></TD>
        </TR>
    </TABLE>
    </FORM>
</BODY>
</HTML>

5. Sample trim function in Javascript.

   <SCRIPT LANGUAGE="Javascript1.2">
function trimmer(pVal) {
    TRs=0;
    for (i=0; i<pVal.length; i++) {
        if (pVal.substr(i,1)==" ") {TRs++;} else {break;}
    }

    TRe=pVal.length-1;
    for (i=TRe; i>TRs-1;i--) {
        if (pVal.substr(i,1)==" ") {TRe--;} else {break;}
    }

    return (pVal.substr(TRs, TRe-TRs+1));
}
</SCRIPT>

6. Retrieving Multiple Checkbox Values As An Array If brackets are missing on names;

   ...
<INPUT TYPE="checkbox" NAME="s" VALUE="A" CHECKED>Checkbox 1<BR>
<INPUT TYPE="checkbox" NAME="s" VALUE="B">Checkbox 2<BR>
<INPUT TYPE="checkbox" NAME="s" VALUE="C">Checkbox 3<BR>
...

   processing script

   <?php
echo '<PRE>('.(gettype($_POST['s']).') ';
print_r($_POST['s']);
?>

   will produce:
   
   (string) A
   
   But if you add [] after each element’s name,

   ...
<INPUT TYPE="checkbox" NAME="s[]" VALUE="A" CHECKED>Checkbox 1<BR>
<INPUT TYPE="checkbox" NAME="s[]" VALUE="B">Checkbox 2<BR>
<INPUT TYPE="checkbox" NAME="s[]" VALUE="C">Checkbox 3<BR>
...

   the same PHP code will produce the output below:

   (array)
Array (
    [0] => A
    [1] => B
    [2] => C
)



   from which we can see that all three boxes are checked.

Conclusion

One of the most important mistakes you could ever make is processing form data without any inspection for errors. Errors fall into two categories:

• Vulgar errors, that occurred as a result of inattentiveness, carelessness or oversight. If you know that 2 by 2 is equal to 4, but wrote down “5” on exam sheet, this is a vulgar error.
• Logical errors, occurred as a result of ignorance, absence of information or malice. If you think 2 by 2 is equal to 5, this is a logical error.

The above division also applies to web form filling. Normal visitors will probably cause vulgar errors, and these errors can be handled by Javascript. You shouldn’t expect more from Javascript. This is really prelimination, not inspection. Against logical errors, especially those caused by a malicious data, you have to set PHP in motion.

The methods, tips and tricks we have mentioned in this article are introductory to advanced level of form processing. As you design complex forms, you will need and develop more methods of inspection. Don’t forget to share them with others!