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

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=".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!

<!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./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
    {

    }
}

Share Improve this question edited Jul 4, 2013 at 23:33 Benjamin Gruenbaum 277k89 gold badges520 silver badges517 bronze badges asked Dec 19, 2012 at 12:45 shlomi 5594 gold badges13 silver badges28 bronze badges

3 You cannot post to html without a server process. How about cookies or Ajax? – mplungjan Commented Dec 19, 2012 at 12:46
You need to do your server side code to receive the data, process it and then output via second html – closure Commented Dec 19, 2012 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 Commented Dec 19, 2012 at 12:48
The real question here is: do you want this done server side or client side? – mkey Commented Dec 19, 2012 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 Commented Dec 19, 2012 at 12:49

| Show 6 more ments

4 Answers 4

Sorted by: Reset to default 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.

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 pletely dependent on the language that you use on your webserver. If you are already fortable with JavaScript, nodejs might be a good option for you: http://nodejs/

Use the below code in else part

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

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 pletely 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

4 Answers 4

评论列表(0)