从HTML表单获取值作为JavaScript变量

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.

Answer 1

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

Answer 2

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.

Answer 3

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; ?>";