Getting values from html form as JavaScript variables

Question

i want to capture input variables sent via form from one page to another.html page and obtain these values as JavaScript variables. Can this be done.

This is my form;

<form action='another.html' id='form' data-ajax='false'>
<input id='sent_by' value='tom'/>
<input type='submit' value='Submit'/>
</form>

And in my another.html i tried to get the values as;

var sent_by = $.session.get("sent_by");

But i am not able to get the values. All help is appreciated.

Where id you get `$.session.get` from? That's not a part of jQuery or jQuery Mobile as far as I know. — T.J. Crowder, Apr 11 '17 at 06:38
That **particular** form will be sent using GET, which means the form parameters end up in the query string of the target page (e.g., `another.html?sent_by=tom&submit=Submit`). [This question's answers](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) tell you how to get them. Is that what you're asking? — T.J. Crowder, Apr 11 '17 at 06:40
@T.J.Crowder, i was trying out some example from another website — Douglas Hosea, Apr 11 '17 at 06:40
But is that what you're asking, how to get the values passed via a GET using JavaScript on `another.html`? — T.J. Crowder, Apr 11 '17 at 06:42

score 2 · Accepted Answer · answered Apr 11 '17 at 06:40

You can use the browser's localStorage to achieve this. Before submitting and going to the other page store all the values of the form in the localStorage and you can access it on the other page:

Page1.html

Field Name = "name" <input type="text" name="name" id="name" />

Read the value and store it to localStorage

localStorage.setItem('name', document.getElementById('name').value);

and so on. You can make a function in JavaScript that saves all the fields of the form in localStorage on / before submit.

To read these values on the other page:

Page2.html Value stored for key name can be get using the following JavaScript:

localStorage.getItem("name");

NOTE

the page1.html and page2.html should be in the same domain for you to access the localStorage.

Read more about localstorage at https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

Thanks @Shakti, you just introduced me to localStorage. I had never really try. Just have to go and read more about it as i may continue to need it. — Douglas Hosea, Apr 11 '17 at 06:57

score 0 · Answer 2 · answered Apr 11 '17 at 06:42

0

Have you tried using Window.localStorage? It's similar to sessionStorage but with no expiration date. So, be sure to clear it once the browsing session ends.

answered Apr 11 '17 at 06:42

Mμ.

8,382
3
26
36

score 0 · Answer 3 · edited Apr 11 '17 at 07:01

I think the answer provided by @Shakti Phartiyal is probably the most practical and a sweet trick I might add. The main reason I'm writing this post is because I had also taken a long path of using javascript to pass along this kind of information. It resulted in me bewildered at how powerful PHP can be for some tasks that you dedicated javascript to do. (Yea I know some javascript wizards out there can do everything with it, I'm just talking about basic programming tho). So if you wondered what the PHP way of passing this around:

Your modified html form:

<form action='another.html' id='form' data-ajax='false' method='post'>
<input id='sent_by' value='tom' name='uname'/>
<input type='submit' value='Submit'/>
</form>

and then in "another.php" you would have this to retrieve the input from the form:

<?php
$uname= htmlspecialchars($_POST['uname'];
?>

Great. But how to make this php variable into javascript? Ah, the fun part. You're going to write javascript to your webpage with php - you do something like this:

var uname = "<?php echo $uname; ?>";

Getting values from html form as JavaScript variables

3 Answers3