I have a 2-step registration process which consists of 2 different HTML pages. The second (and final) step collects all the data and sends it to the server for evaluation. For simplicity, let's say I collect user's name in the first form and user's age in the second:

formA.html:

<form action="formb.html" method="get">
      Name: <input id="age" type="text" name="age">
      <input id="submit_button" type="submit" value="CONTINUE">
</form>

formB.html:

<form action="serverscript.py" method="post">
      Age: <input id="name" type="text" name="name">
      <input id="submit_button" type="submit" value="SUBMIT">
</form>

How can I "propagate" the "name" that user has entered in formA.html to formB.html so that I can send name,age to the server?

p.s. The only way I can thinkg is doing it with and then parsing the URL in formB , but that seems very ugly...

I have a 2-step registration process which consists of 2 different HTML pages. The second (and final) step collects all the data and sends it to the server for evaluation. For simplicity, let's say I collect user's name in the first form and user's age in the second:

formA.html:

<form action="formb.html" method="get">
      Name: <input id="age" type="text" name="age">
      <input id="submit_button" type="submit" value="CONTINUE">
</form>

formB.html:

<form action="serverscript.py" method="post">
      Age: <input id="name" type="text" name="name">
      <input id="submit_button" type="submit" value="SUBMIT">
</form>

How can I "propagate" the "name" that user has entered in formA.html to formB.html so that I can send name,age to the server?

p.s. The only way I can thinkg is doing it with and then parsing the URL in formB , but that seems very ugly...

• javascript
• jquery
• html

4 Answers 4

formA.html:

 <form action="formb.html" method="get">
          Name: <input id="Name" type="text" name="Name">
          <input id="submit_button" type="submit" value="CONTINUE">
    </form>

In form B make This Changes...

formB.html:

<form action="serverscript.py" method="post">
      Age: <input id="age" type="text" name="age">
      <input id="Name" type="hidden" value="">
      <input id="submit_button" type="submit" value="SUBMIT">
</form>
 <script type="text/javascript">
    var query = window.location.search.substring(1);
    var Field=query.split("=");
    document.getElementById("Name").value = Field[1];
</script>

Hope it will help ;)

I can think of 3 ways :

1) cookie. store the information in a cookie and read it in the second form
2) Query string.You can chain the the data to query string and read it on form B
3) You can use the action attribute of a form which can take a url. (remended)

You can build the data you get from form A as html hidden input fields within form B on load, since you are sending your data through 'GET' method, then when you submit form B, the data will be sent to the server.

Edit

Assuming am using PHP as server side :

forma.php

<form action="formb.php" method="get">
      Name: <input id="name" type="text" name="name">
      <input id="submit_button" type="submit" value="CONTINUE">
</form>

formb.php

<form action="postPage.php" method="post">
      Age: <input id="age" type="text" name="age">

      <?php
        if(isset($_GET['name'])
        {
      ?>

         <input id="name" type="hidden" name="name" value="<?php echo $_GET['name']?>"/>

      <?php } ?>

      <input id="submit_button" type="submit" value="SUBMIT">
</form>

Try using HTML5 sessionStorage to store data in browser session. During the session, a user could visit other pages of the domain, or other sites entirely, then return to the original domain. Any data saved in sessionStorage during that session will remain available, but only to pages in the original domain, until the tab or window is closed.