HTML & JQuery: how to retrieve data from previous form

Question

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?

possible duplicate of Ways to pass info to the next page in Javascript — Felix Kling
– Felix Kling, Commented May 10, 2012 at 10:50
@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
– Felix Kling, Commented May 10, 2012 at 11:00

Ravi Gadag · Accepted Answer · 2012-05-10 11:04:37Z

4

You can pass data from one page to another by

QueryString
Cookie
Sessions (Per User Basis via Server scripts )
Localstorage

edited May 10, 2012 at 11:04

answered May 10, 2012 at 10:55

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oliver M Grech Over a year ago

Perfect Reply, I second this!

Felix Kling Over a year ago

Sessions would require a server side language though (it should be mentioned).

atmd Over a year ago

Just a comment, but is there a reason your doing it over multiple page rather than on one page? Might be a better user experience

newSpringer Over a year ago

it would be alot easier for me to do it all on one page but i was given this design and i have to work with it and add functionality and validation so i have to stick with it :/

cmilhench · Accepted Answer · 2012-05-11 08:48:01Z

2

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>

edited May 11, 2012 at 8:48

answered May 10, 2012 at 11:08

cmilhench

6765 silver badges17 bronze badges

4 Comments

newSpringer Over a year ago

i added these to my html pages and everything seems to be running ok, but how do i actually get the variable again in the .js code to save the number?......... is it just simply var cardNo = cardNumberReg;

cmilhench Over a year ago

in the second piece of code cardNumberReg will be assigned the value added to the cookie, which is then writen into a hidden form field. Youd need to add that hidden form field to your html on the second page i.e. '<input type="hidden" id="HiddenCardNumberRegField">'

newSpringer Over a year ago

ya i already have the hidden input added, but when i debug my code and check the value for the hidden input it is saying that there is nothing in there, it is just = ""..... i have edited my answer just to incase i have an error somewhere in my code

cmilhench Over a year ago

EDIT: Updated the above with a full solution and made the hidden field visible so that you can see it working. Note: in your originaly posted code you have elements with multiple id's etc. the id attribute can only be specified once per tag and should be unique

jumancy · Accepted Answer · 2012-05-10 11:16:28Z

1

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

answered May 10, 2012 at 11:16

jumancy

1,3401 gold badge10 silver badges16 bronze badges

2 Comments

newSpringer Over a year ago

and how do you mean an invisable div? something like: mydiv = document.getElementById("mydiv"); mydiv.style.display = "none";

jumancy Over a year ago

In html page write for ex: <div id="data" style="visibility:hidden"></div>. then through jquery append your data to that div.

Collectives™ on Stack Overflow

HTML & JQuery: how to retrieve data from previous form

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related