Passing Data from one Form to another

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://sislands.com/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://sislands.com/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 ACTION="FormName">
    <INPUT TYPE="text" NAME="myfield">
    <TEXTAREA NAME="otherfield"></TEXTAREA>
    <INPUT TYPE="submit">
</FORM>

<SCRIPT>

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() method 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://sislands.com/output.htm?check1=X

Note that the second check box emcheck2 did not get passed across. That's 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">
    <INPUT TYPE="radio" NAME="radio" VALUE="X" CHECKED>
    <INPUT TYPE="radio" NAME="radio2" VALUE="Y">
    <INPUT TYPE="submit">
</FORM>

When submitted the location of the next page will be:

http://sislands.com/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">
    <INPUT TYPE="radio" NAME="radio" VALUE="0" CHECKED>
    <INPUT TYPE="radio" NAME="radio2" VALUE="1">
    <INPUT TYPE="submit">
</FORM>

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

http://sislands.com/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://sislands.com/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">Choice 2
    </SELECT>
    <INPUT TYPE="submit">
</FORM>

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

http://sislands.com/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().

<SCRIPT>

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>

function split(string, text) {
    splitArray = string.split(text);
    splitIndex = splitArray.length;
}

</SCRIPT>

<SCRIPT>

var splitIndex = 0;
var 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, ie:

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="FormName">
    <INPUT TYPE="text" NAME="textname">
    <TEXTAREA NAME="textareaname"></TEXTAREA>
    <INPUT TYPE="password" NAME="passwordname">
    <SELECT NAME="selectname">
        <OPTION VALUE="0" SELECTED>First Choice
        <OPTION VALUE="1">Second Choice
        <OPTION VALUE="2">Third Choice
    </SELECT>
    <SELECT NAME="multiselname" MULTIPLE>
        <OPTION VALUE="0" SELECTED>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" >
    <INPUT TYPE="radio" NAME="radioname" VALUE="1">
    <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.vvalue = 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] == 'multiselname')
        document.FormName.multiselname.options[splitArray[i + 1]].selected = true;
    if (splitArray[i] == 'checkboxname')
        document.FormName.checkboxname.checked = true;
    if (splitArray[i] == 'radioname')
        document.FormName.radioname[splitArray[i + 1]].checked = true;
}

Working Examples

See the Examples works: