Knowledge Base Articles » KB100214: Handling Form Submissions in Client-side Script.

Perhaps the most common model of information processing in Web applications is one where user input is first transferred from the browser to a server-side script. There it is processed and a new page is sent back to the browser. The content of this new page is determined dynamically based on the input that was supplied by the user. Both the ASP and CGI technologies are based on this model.

However, it is possible to have user input entered in one html page, and then sent to a second html page where it is processed by client-side script. This can be useful if the processing is simple, and it has the added advantage of reducing the load on the Web server by moving the processing logic from the server to the client. This document describes how to handle form submissions that use the "GET" method in client-side script.

Passing information from one html page to another using a form submission is very similar to passing data to a server-side script. The main difference is that if the target of a form submission is an html then we are restricted to using the default "GET" method of submission. This method of submission passes the data entered into the form fields as part of the URL used to request the target page. This is achieved by appending a question mark ("?") to the end of the standard URL, and then following this with the name=value pairs for all named fields in the form. These name=value pairs are separated by ampersand ("&") characters. By way of an example, consider the following form:

<form method= "get" action="MyPage.htm" target="_blank">
<input type="hidden" name="ssn" value="000-00-0000">
First Name: <input type="text" name="FirstName"> <br>
Last Name: <input type="text" name="LastName"> <br>
<input type="submit">
</form>

Let us assume that the above form is in the default page on the server www.mydomain.com. If the user enters "John" in the FirstName field and "Doe" in the LastName field of this form. when the form is submitted, the following URL will be used to request the target page:

http://www.mydomain.com/MyPage.htm?ssn=000-00-0000&FirstName=John&LastName=Doe

The information appended to the URL is known as the query string or search string. In ASP pages, it can be accessed through the Request.QueryString collection. In client-side scripts, it is accessed through the location.search property.

The following JavaScript function can be used in client-side scripts to retrieve the value associated with any named form field that was submitted to the page using the "get" method of form submission:

<script type="text/javascript">
function getFieldValue (strFieldName)
{
    var strFieldValue;
    var objRegExp = new RegExp(strFieldName + "=([^&]+)","gi");

    if (objRegExp.test(location.search))
        strFieldValue = unescape(RegExp.$1);
    else strFieldValue="";

    return strFieldValue;
}
</script>

This function uses the Regular Expression object to search the query string for the requested name-value pair. Note that if the name-value pair is found we "unescape" the value before returning it. The unescape function converts numeric character codes to actual characters. This is required because when a form is submitted using the GET method, certain special characters in form fields will be automatically converted to character codes to prevent ambiguous query strings. Specifically, the ampersand ("&") and equals ("=") characters are converted to their corresponding character codes for obvious reasons. The unescape function converts these character codes back to the original characters.

By making use of the getFieldValue function, we can then easily access submitted form fields in client-side script. The following code would display the value of the hidden form field "ssn" and the values entered in the FirstName and LastName fields of the form shown above.

Your Social security number is <script type="text/javascript">
document.write(getFieldValue("ssn"))
</script>.<br>

You entered &quot;<script type="text/javascript">
document.write(getFieldValue("FirstName"))
</script>&quot; as your First Name.<br>

You entered &quot;<script type="text/javascript">
document.write(getFieldValue("lastName"))
</script>&quot; as your Last Name.<br>

Assuming you entered "John" in the FirstName field and "Doe" in the LastName field of the form, then the above code would produce the following output:

Your Social security number is 000-00-0000.<br>
You entered "John" as your First Name.<br>
You entered "Doe" as your Last Name.<br>

To see the above example in action, complete and submit the form below:

First Name:
Last Name:

By utilizing hidden form fields, you can also use this technique to pass script variables from one page to another, as illustrated below:

<script type="text/javascript">
var strSSN = "000-00-0000"

function SetSSN ()
{
    document.form1.ssn.value = strSSN
}
</script>

<form method="get" action="MyPage.htm" name="form1">
<input type="hidden" name="ssn">
First Name: <input type="text" name="FirstName"> <br>
Last Name: <input type="text" name="LastName"> <br>
<input type="submit" onclick="SetSSN()">
</form>