How do I send data between 2 html pages using javascript?

Question

I have 2 html files, fillForm.html, and AnswerForm.html, and a javascript file called scripts.js I want to create a form in the fillForm page, with name and age, and when I click Submit, I want to check that all the form as been filled up, and send the data to the second page, That will present on screen: " Hello "name", your Age is "age" " I think it something with request and response, but I want to do it with post, and not take data from the url with get. I have this in the fillForm page:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.js" 
         type="text/javascript"></script>

    </head>

    <body>
        <form name="myForm" action="AnswerForm.html" onsubmit="return validateForm()" method="post">
            First name: <input type="text" name="fname"><br/>
            Age: <input type="text" name="age">
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

And the script in scripts.js is:

function validateForm()
{
    var firstName=document.forms["myForm"]["fname"].value;
    var Age=document.forms["myForm"]["age"].value;
    if ((firstName==null || firstName=="") || (Age==null || Age==""))
    {
          alert("fillOut  all the form");
          return false;
    }
    else
    {

    }
}

Know I just want to take the data and show it on ANSWERFORM.html and here I need help. Also I have a question: Is the check of the form is good or maybe there is a better way to check? Because if I have not 2 data to check but 40, This checking will be very long, and also the checking is not specific but general) Thank you!

You cannot post to html without a server process. How about cookies or Ajax? — mplungjan, Dec 19 '12 at 12:46
You need to do your server side code to receive the data, process it and then output via second html — closure, Dec 19 '12 at 12:47
You have to send data to the server in order to pass it to the second page. Javascript is a client side language. — xlecoustillier, Dec 19 '12 at 12:48
The real question here is: do you want this done server side or client side? — mkey, Dec 19 '12 at 12:48
When you submit the form (and it is valid), the data will be sent to your server. You will then need your server to create the Answerform.html page. Your server can place whatever data you need in answerform.html. Question is, what language are you using in your server? — cammil, Dec 19 '12 at 12:49
try PHP to grab the data in the 2nd page and display all the HTML you want. $_POST['fieldname'] — Naryl, Dec 19 '12 at 12:50
@cammil I do not have a server, it is just an exercise for me to learn more. — shlomi, Dec 19 '12 at 12:55
@shlomi If you want to learn more, then it'll probably be a good idea to get a server. It's kind of essential for even simple things (as you are probably realising). You need to ask yourself, what happens to the data once it's posted, and how is it going to get to the next page? — cammil, Dec 19 '12 at 16:29

score 3 · Answer 1 · answered Dec 19 '12 at 12:48

3

You normally need a server side code/process to handle data like that.

But if you want to stay in javascript, you can use the localStorage to store some data and use it in the next page. But localStorage don't work on all browsers so be careful.

answered Dec 19 '12 at 12:48

Magus

14,796
3
36
51

You can see the supported browsers and more information on `localStorage` here: http://diveintohtml5.info/storage.html – Marty Jul 04 '13 at 23:38

score 0 · Answer 2 · edited May 23 '17 at 11:48

The normal way of doing this would probably be to post the data to the webserver with the request, use some server-side language to handle it and render the data properly on the next page, but it would be possible to do something similar with JavaScript I guess.

The idea would be to modify your HTML-form to post the data through HTTP GET instead of POST. Your form data would then be added to the querystring when calling AnswerForm.html. On the answer-page you could then read the querystring with something like the examples describe in this SO answer and then inject the content into your answer-page on load, with some simple DOM-manipulation.

Notice: This solution would rely completely on JavaScript to work, otherwise the user will not see any data on the answer page.

Update:

Using the example found in the above referenced SO post, you could do it something like this:

<html>
   <head>
        <title>Foo</title>
        <script>
        function getParameterByName(name)
        {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.search);
            if(results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        </script>
   </head>
   <body> 
      Hello <span id="fname"></span>
      <script>
         var fname = getParameterByName("fname");
         document.getElementById("fname").innerText = fname;
      </script>
   </body> 
</html>

To make it easier for you, you can add a span-element with an ID (to make it easy to select through javascript) and then read the content of the querystring and add it to that span.

Thanks, I didn't want it in get, just post, but I also tried with get. I see the parameters in the url, but I can I use them? This is my AnswerForm.html: Hello (What I need to wite here?!?) — shlomi, Dec 19 '12 at 13:54

score 0 · Answer 3 · answered Dec 19 '12 at 12:50

This is not a job best suited to plain browser-based JavaScript. The problem is that browser-based JS is specific to a given page. When that page is disposed of (that is when you submit the data), that JavaScript goes away with the page that contains it. You could pass via session or local storage (using localStorage.key = value or sessionStorage.key = value) but that is something of a workaround and leaves your data editable by the end user even after it is submitted.

To implement your solution properly you need to pass by a web server in some respect, which will manage the request, accepting the data from the first page, holding onto it and passing it to the second page. How you do this is completely dependent on the language that you use on your webserver. If you are already comfortable with JavaScript, nodejs might be a good option for you: http://nodejs.org/

score 0 · Answer 4 · answered Dec 19 '12 at 12:56

0

Use the below code in else part

document.forms["myForm"].action="AnswerForm.html?fanme="+firstName+"&age="+Age;
return true;

answered Dec 19 '12 at 12:56

Maheshkumar

724
1
10
19

`I want to do it with post, and not take data from the url with get.` – Marty Jul 04 '13 at 23:36

How do I send data between 2 html pages using javascript?

4 Answers4