I'm creating an application using JQuery and HTML. In the first form i you are asked to enter a id, then once this is checked you are asked to add in more information. The problem that i am having is that after you press submit in the second page i want to save all the information together, this includes the id entered in the first page.

The forms are created using HTML and the functionality is done using JQuery. I know this can be done using PHP but as I am not using any PHP for this application I was wondering is this possible any other way.

I am using this in one of the .js pages. Here is the HTML from the first page that is asking for the ID ...

EDIT:

index.html

<script type="text/javascript" charset="utf-8">
$('#RegisterForm').submit(function(){
$.cookie('cardNumberRegField', $('#cardNumberRegField').val());
});
</script>   

<form id="RegisterForm" method="post" data-ajax="false" id="registerCardForm" 
      action="register.html"> 
        <input type="text" id="cardNumberRegField" type="tel"  name="cardNumber" 
               class="required number register" minlength="16" maxlength="16"/> 
        <input name="Submit" type="submit" class="button" value="Register"/>
</form>

register.html

<script type="text/javascript" charset="utf-8">
$('#AccountDetailsForm').submit(function(){
var cardNumberReg = $.cookie('cardNumberRegField');
$('#tfscCardNumber').val(cardNumberReg );
});
</script>

<form id="AccountDetailsForm" method="post" data-ajax="false" id="thankyoupage" action="thankyou.html">

<input  id="tfscCardNumber" type="hidden" name="tfscCardNumber" class="readonly" minlength="2" maxlength="20" readonly="readonly" disabled="disabled"/>            

Does anybody know any solutions?

I'm creating an application using JQuery and HTML. In the first form i you are asked to enter a id, then once this is checked you are asked to add in more information. The problem that i am having is that after you press submit in the second page i want to save all the information together, this includes the id entered in the first page.

The forms are created using HTML and the functionality is done using JQuery. I know this can be done using PHP but as I am not using any PHP for this application I was wondering is this possible any other way.

I am using this in one of the .js pages. Here is the HTML from the first page that is asking for the ID ...

EDIT:

index.html

<script type="text/javascript" charset="utf-8">
$('#RegisterForm').submit(function(){
$.cookie('cardNumberRegField', $('#cardNumberRegField').val());
});
</script>   

<form id="RegisterForm" method="post" data-ajax="false" id="registerCardForm" 
      action="register.html"> 
        <input type="text" id="cardNumberRegField" type="tel"  name="cardNumber" 
               class="required number register" minlength="16" maxlength="16"/> 
        <input name="Submit" type="submit" class="button" value="Register"/>
</form>

register.html

<script type="text/javascript" charset="utf-8">
$('#AccountDetailsForm').submit(function(){
var cardNumberReg = $.cookie('cardNumberRegField');
$('#tfscCardNumber').val(cardNumberReg );
});
</script>

<form id="AccountDetailsForm" method="post" data-ajax="false" id="thankyoupage" action="thankyou.html">

<input  id="tfscCardNumber" type="hidden" name="tfscCardNumber" class="readonly" minlength="2" maxlength="20" readonly="readonly" disabled="disabled"/>            

Does anybody know any solutions?

• javascript
• jquery
• html

Share Improve this question Follow edited May 10, 2012 at 16:04 newSpringer asked May 10, 2012 at 10:48 newSpringernewSpringer 1,0281010 gold badges2828 silver badges4545 bronze badges 3

• 3 possible duplicate of Ways to pass info to the next page in Javascript – Felix Kling Commented May 10, 2012 at 10:50
• 2 @FelixKling you're hot on the dupes today :) – Rory McCrossan Commented May 10, 2012 at 10:55
• @Rory: I'm always hot on duplicates ;) Seriously, most of the new questions I see, I have seen before, maybe slightly different. Or the solution can be derived from two questions... it just frustrates me seeing people asking the same questions over and over again. Or asking really localized questions... maybe I should take a SO break :D – Felix Kling Commented May 10, 2012 at 11:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can pass data from one page to another by

1. QueryString
2. Cookie
3. Sessions (Per User Basis via Server scripts )
4. Localstorage

The values that you want to save in the second form post either need to be stored on the server recieving the second post (during the first form post) or re-posted during the second post.

It looks to me as though you are not using a server side technology for the first post i.e. your posting to a html page. So the solution would seem to be the latter of the two described above. And as you are not using a server side technology I would consider catching the first form submission and storing the values in a cookie. Then on the second page you can catch the form post and add the values from your cookie.

To do this I would use jquery.submit and jquery.cookie and add something like the following;

EDIT: index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!--[if IE]><![endif]-->
        <title></title>
        <script type="text/javascript" src="../_/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="../_/js/jquery.cookie.js"></script>
        <script type="text/javascript">
            $(document).ready(function () { 
                $('#RegisterForm').submit(function () {
                    $.cookie('cardNumberRegField', $('#cardNumberRegField').val());
                });
            });
    </script> 
    </head>
    <body>
        <form id="RegisterForm" action="register.html">  
            <input type="text" id="cardNumberRegField" value="test" />  
            <input type="submit" value="Register" /> 
        </form>
    </body>
</html>

EDIT: register.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!--[if IE]><![endif]-->
        <title></title>
        <script type="text/javascript" src="../_/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="../_/js/jquery.cookie.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#tfscCardNumber').val($.cookie('cardNumberRegField'));
            });
        </script>
    </head>
    <body>
        <form id="AccountDetailsForm" action="thankyou.html"> 
            <input id="tfscCardNumber" type="text" value="undefined" /> 
        </form>
    </body>
</html>

You can locate the values from thr Form 1 in an invisible div, and then get them on submitting the Form 2