Carry form field values to next page in plain HTML using javascript

Question

Unlike textbox, radio button and checkbox is it possible to carry values of textarea and select tag to another page in plain HTML using javascript? if yes then how?

Answer 1

There are two steps to read form values using HTML and Javascript.

Use the GET method

Modify your form to use the GET method instead of POST. POST data can only be read on the server side. You want to read the form data on the client side, so you must ensure that the data exists in the URL:

<form method="get">

When you submit your form, you will see your data in the URL, like

http://localhost/yourTarget.html?field1=value&field2=value

Read the GET data via Javascript

The JavaScript to read the query parameters (everything after the '?') is quite simple:

window.location.search;

Using the example URL above, this code will return '?field1=value&field2=value'

Here is a functional (though rudimentary) example:

<form method="get">
    <textarea name="mytext">Text area value</textarea>
    <input type="submit" value="Submit" />
</form>

Input values:
<div id="inputValues"></div>

<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />

<script>
    var element = document.getElementById("retrieveInputValuesButton");
    element.onclick = function()
    {
        document.getElementById("inputValues").innerHTML = window.location.search;
    }
</script>

All that is left is to parse the query string to retrieve your values.

Answer 2

Pass the textarea and select menu values in the URL as query parameters using GET method in form.

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

Then in the next page,

var textAreavalue= getParameterByName('textareaName'); 

Answer 3

Sounds like you want to use the LocalStorage API. You can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Basically, you will want to serialize your form data into an object literal, convert that object literal into a JSON string with JSON.stringify() and then store the results into localStorage. On the subsequent page, you can then load what you stored, parse the JSON back into an object literal with JSON.parse() and then fill in your form elements.

Some untested pseudo code:

var values = someFunctionToSerializeFormData();
values = JSON.stringify(values);
window.localStorage.setItem('form-data', values);

Then on page 2

var values = window.localStorage.getItem('form-data');
values = JSON.parse(values);