Passing data from one form to another

You are here: irt.org | Articles | JavaScript | Form | Passing data from one form to another [ previous next ]

Published on: Saturday 14th February 1998 By: Martin Webb

• Introduction
• Simple Forms
• Complicated Forms
• Working Example
• Source Code

Introduction

This article describes how to transfer data from a form on one page to a form on another page.

Note: The examples in this article will not work offline in MSIE version 3.x, as it uses the locations search property to pass the form information between pages.

Simple Forms

Text Fields

To transfer the contents of the following form to the same form on another page is quite simple:

<FORM ACTION="output.htm">
<INPUT TYPE="text">
</FORM>

If we enter some information in the text box and then press enter the browser will load the output.htm file into the browser. Unfortunately the form data will not be passed because the text field was not named.

This can be easily rectified:

<FORM ACTION="output.htm">
<INPUT TYPE="text" NAME="myfield">
</FORM>

The browser passes the name of the form field along with the value of the field as part of location:

http://www.irt.org/articles/js054/output.htm?myfield=abc123

If we include more form fields:

<FORM ACTION="output.htm">
<INPUT TYPE="text" NAME="myfield">
<TEXTAREA NAME="otherfield"></TEXTAREA>
<INPUT TYPE="submit">
</FORM>

Then the form fields name-value pairs are separated by ampersand characters:

http://www.irt.org/articles/js054/output.htm?myfield=abc123&otherfield=qwerty

Receiving the form data

For the receiving page to access this data, all that is required is to manipulate the search property of the current location:

<FORM NAME="formname">
<INPUT TYPE="text" NAME="myfield">
<TEXTAREA NAME="otherfield"></TEXTAREA>
<INPUT TYPE="submit">
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
function getParm(string,parm) {
    // returns value of parm from string
    var startPos = string.indexOf(parm + "=");
    if (startPos > -1) {
        startPos = startPos + parm.length + 1;
        var endPos = string.indexOf("&",startPos);
        if (endPos == -1)
            endPos = string.length;
        return unescape(string.substring(startPos,endPos));
    }
    return '';
}

var passed = location.search.substring(1);

document.formname.myfield.value = getParm(passed,'myfield');
document.formname.otherfield.value = getParm(passed,'otherfield');
//--></SCRIPT>

The search property is first stripped of its initial question mark, and then held in passed. The getParm() function is used to return the value of the required parameter contained in passed. The values returned by getParm() are then used to update the formname form fields.

Encoded Characters

The original form may, however, have been completed with characters other than a-z and 0-9, in which case the browser will have encoded then. This is why we need to use the built in unescape() function to convert these encoded characters back to their original state.

If the original form fields had been complete with spaces, then these will have been converted to plus signs. It is necessary to change these back to spaces before attempting to use unescape(). It is simple to perform this on the whole search string rather than the individual field values:

function replace(string,text,by) {
    // Replaces text with by in string
    var i = string.indexOf(text), newstr = '';
    if ((!i) || (i == -1))
        return string;
    newstr += string.substring(0,i) + by;
    if (i+text.length < string.length)
        newstr += replace(string.substring(i+text.length,string.length),text,by);
    return newstr;
}

The replace() function simply replaces any occurences of text with by within string.

Now when we strip the question mark from the beginning of the search property we can change all the plus signs to spaces:

var passed = replace(location.search.substring(1),"+"," ");

Check Boxes

<FORM ACTION="output.htm">
<INPUT TYPE="checkbox" NAME="check1" VALUE="X" CHECKED>
<INPUT TYPE="checkbox" NAME="check2" VALUE="Y">
<INPUT TYPE="submit">
</FORM>

When the previous form is submitted the location of the next page will be:

http://www.irt.org/articles/js054/output.htm?check1=X

Note that the second check box did not get passed across. Thats because is wasn't checked. Therefore all we need to do to correctly select check boxes on the next page is to find out whether the name-value pair was passed across (we are not actually interested in the value part):

if (getParm(passed,'check1') != '')
    document.formname.check1.checked = true;

Radio Buttons

Consider the following form:

<FORM ACTION="output.htm">
On:  <INPUT TYPE="radio" NAME="radio1" VALUE="X" CHECKED>
Off: <INPUT TYPE="radio" NAME="radio1" VALUE="Y">
<INPUT TYPE="submit">
</FORM>

When submitted the location of the next page will be:

http://www.irt.org/articles/js054/output.htm?radio1=X

Instead we require the values of the radio buttons to indicate their index with the current radio group (a radio group is a group of radio buttons all with the same name):

<FORM ACTION="output.htm">
On:  <INPUT TYPE="radio" NAME="radio1" VALUE="0" CHECKED>
Off: <INPUT TYPE="radio" NAME="radio1" VALUE="1">
<INPUT TYPE="submit">
</FORM>

Which when submitted the location of the next page will be:

http://www.irt.org/articles/js054/output.htm?radio1=0

We can then set the correct radio button on the next page using:

document.formname.radio1[getParm(passed,'radio1')].value = true;

Select Options

If we treat these similar to radio buttons, where the value indicates the index of the option, then we can use the existing mechanism to pass the data to the next page:

<FORM ACTION="output.htm">
<SELECT NAME="chosen">
<OPTION VALUE="0" SELECTED>Choice 1
<OPTION VALUE="1">Choice 2
</SELECT>
<INPUT TYPE="submit">
</FORM>

Which when submitted the location of the next page will be:

http://www.irt.org/articles/js054/output.htm?chosen=0

We can then set the correct radio button on the next page using:

document.formname.chosen.selectedIndex = getParm(passed,'chosen');

Complicated Forms

The previous mechanism of passing data from one form to another will not work for forms that require drop down multiple select options.

<FORM ACTION="output.htm">
<SELECT NAME="chosen" MULTIPLE>
<OPTION VALUE="0" SELECTED>Choice 1
<OPTION VALUE="1" SELECTED>Choice 2
</SELECT>
<INPUT TYPE="submit">
</FORM>

Which when submitted the location of the next page will be:

http://www.irt.org/articles/js054/output.htm?chosen=0&chosen=1

Only the first occurence of chosen will be found by the getParm() function. A different approach is need for forms containing drop down multiple select options.

Rather than find the required parameter in the search property each time, which does incur an overhead, we can split the name-value pairs passed across into an array using the string method split().

As the split() method was introduced in JavaScript 1.1. we'll need to create a split mechanism for browsers that only support JavaScript 1.0.

<SCRIPT LANGUAGE="JavaScript"><!--
var passed = replace(replace(location.search.substring(1),"+"," "),"=","&");

function split(string,text) {
    var strLength = string.length, txtLength = text.length;
    if ((strLength == 0) || (txtLength == 0)) return;
    var i = string.indexOf(text);
    if ((!i) && (text != string.substring(0,txtLength))) return;
    if (i == -1) {
        splitArray[splitIndex++] = string;
        return;
    }
    splitArray[splitIndex++] = string.substring(0,i);
    if (i+txtLength < strLength)
        split(string.substring(i+txtLength,strLength),text);
    return;
}

//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1"><!--
function split(string,text) {
    splitArray = string.split(text);
    splitIndex = splitArray.length;
}
//--></SCRIPT>


<SCRIPT LANGUAGE="JavaScript"><!--
var splitIndex = 0, splitArray = new Object();

split(passed,'&');
//--></SCRIPT>

Once we've replaced the plus signs with spaces in the search property, we additionally replace the equal signs with ampersands. This will enable us to split the name and values up into separate items, e.g.

chosen=0&chosen=1

Will become:

chosen&0&chosen&1

If the browser supports JavaScript 1.2 then the string split() method will be used otherwise the earlier define split() function will be used. Both will split the string using the text character passed, placing the contents in the splitArray[].

Therefore the splitArray[] would in this instance contain:

chosen
0
chosen
1

As you can see the array will contain the names of the form field followed by its value.

If the chosen form field were a text box, we would update it with:

document.formname.chosen.value = unescape(splitArray[indexEntry]);

Where indexEntry is the correct location within the splitArray[] for the value of chosen.

Rather than search through the array for the required form fields and their values, it is better to process the array an entry at a time.

For example the following form:

<FORM ACTION="output.htm">
<INPUT TYPE="TEXT" NAME="textname">
<TEXTAREA NAME="textareaname"></TEXTAREA>
<INPUT TYPE="PASSWORD" NAME="passwordname">
<SELECT NAME="selectname">
<OPTION VALUE="0">First Choice
<OPTION VALUE="1">Second Choice
<OPTION VALUE="2">Third Choice
</SELECT>
<SELECT MULTIPLE NAME="multipleselectname">
<OPTION VALUE="0">First Choice
<OPTION VALUE="1">Second Choice
<OPTION VALUE="2">Third Choice
</SELECT>
<INPUT TYPE="CHECKBOX" NAME="checkboxname">
<INPUT TYPE="RADIO" NAME="radioname" VALUE="0" onClick="0">
<INPUT TYPE="RADIO" NAME="radioname" VALUE="1" onClick="0">
<INPUT TYPE="HIDDEN" NAME="hiddenname" VALUE="hidden value">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>

could be easily copied using the following script:

for (var i=0; i < splitIndex; i=i+2) {
    if (splitArray[i] == 'textname')
        document.formname.textname.value = unescape(splitArray[i+1]);
    if (splitArray[i] == 'textareaname')
        document.formname.textareaname.value = unescape(splitArray[i+1]);
    if (splitArray[i] == 'passwordname')
        document.formname.passwordname.value = unescape(splitArray[i+1]);
    if (splitArray[i] == 'selectname')
        document.formname.selectname.selectedIndex = splitArray[i+1];
    if (splitArray[i] == 'multipleselectname')
        document.formname.multipleselectname.options[splitArray[i+1]-0].selected = true;
    if (splitArray[i] == 'checkboxname')
        document.formname.checkboxname.checked = true;
    if (splitArray[i] == 'radioname')
        document.formname.radioname[splitArray[i+1]].checked = true;
}

Note, that the radio buttons have a dummy onClick event handler, which is a workaround for older browsers that mix up the index order of the radio buttons.

Note, also the need to subtract zero from the multiple select options index, this converts the string value to a numeric value, required again for older browsers.

Working Example

Try this example: Input Form.

Source Code

You can view the source code of the two pages:

Related items

Chapter 6: Beginning JavaScript

Controlling Data Entry Using Form Fields

Form Image Button Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons

©2018 Martin Webb