Submit HTML form to display entered info in new page

Question

I have a HTML form (called form.html)and a JavaScript function such that when form is submitted, information in that form will be displayed.
Now I want all those info will be shown in new HTML page (called confirm.html), where should I go from?

NOTE: No php or sever-side or anything that really seriously related, it's just simple OFFLINE HTML-form problem, I just have 2 html place in same folder, I will test it on my browser, that's it. Only thing that I worry is how to use information from form.html file in confirm.html file since they are obviously separated.

Thank you very much, here is my form.html ( I dont have confirm.html yet)

    <HTML>
      <HEAD>
        <TITLE>Contact</TITLE>

        <script type="text/javascript">

          function addtext()
          {
             var fname = document.myform.first_name.value;
             var lname = document.myform.last_name.value;
             var email = document.myform.email.value;

             document.writeln("Thank you! You have just entered the following:");
             document.writeln("<pre>");
             document.writeln("First Name    : " + fname);
             document.writeln("Last Name     : " + lname);
             document.writeln("Email Address : " + email);
          }
        </script>
      </HEAD>
      <BODY>

      <center>
<b>CONTACT US</b> <br></br>   
<form name="myform">

  <label for="first_name">First Name </label>
  <input  type="text" name="first_name" maxlength="50" size="30">
    <br>
  <label for="last_name">Last Name </label>
  <input  type="text" name="last_name" maxlength="50" size="30">
    <br>
  <label for="email">Email Address</label>
  <input  type="text" name="email" maxlength="80" size="30">
    <br>
  <input type="submit" value="Submit" onClick="addtext()">

</form>

    </BODY>
    </HTML>

Basic idea is that this would make use of a server side scripting language such as PHP, ASP or similar... — jtheman, Oct 14 '12 at 18:57

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Check out the window object of JavaScript: http://www.devguru.com/technologies/javascript/10855.asp

It has a property location, if you write into it, your browser will redirect:

window.location = "http://www.google.com";

Note though, that this will not post your data to confirm.html. what you are trying to do without server-side scripting is not very useful. An HTML form will use CGI (common gateway interface) to send data to a server, that can then process the information. If you use the file:// protocol (as you seem to be doing; all local, static files), there is no server-side to process the data, only JavaScript.

If using the GET method of sending the data through CGI, you could extract the data from the URL using javaScript (as mentioned in another question). To do this, just update your form like this:

<form action="confirm.html" method="get">

And do not put a onClick handler on the submit button, just let it submit.

Many other tools exist though that way more are suitable for the job: server-side scripting languages, examples include PHP, ASP, JSP. For local setups, your best best is using XAMPP.

Could you be more specific? I am not suppose to go online, just want go to confirm.html. what should I use, is it: window.location = "confirm.html"; ? — Ronaldinho Learn Coding, Oct 14 '12 at 19:15
I think it will be `window.location = "http://yourserver/confirm.html"`. If you want to make it a little more portable, you could use some string replacing. But, what have you tried? — Bart Friederichs, Oct 14 '12 at 19:21
you may want to see my question again, I've changed it for awhile. Thanks! — Ronaldinho Learn Coding, Oct 14 '12 at 19:23

score 1 · Answer 2 · edited May 23 '17 at 11:44

If you don't want to rely on server-side technology, this becomes more complicated (and hacky, I might add). Probably the easiest would be to generate a url like this on submit -

http://localhost/confirm.html?first_name=val1&last_name=val2&email=val3

then add some code to confirm.html to unpack this. Here's a related question you may find helpful.

If you'd allow me a moment of editorializing, what exactly are you trying to do? If this is just a personal project to see how html works, then I'd strongly recommend starting to learn about server-side technology - once you start wanting to handle user data and persist state, you're pretty much forced to use the server. The web is by design pretty stateless; you can't pass variable in-between pages without either using the server, or through some very complicated AJAX & DOM updating techniques which tend to rely on specialized server files anyway. You can run a PHP & MySQL server locally using existing technology, and if you're interested in expanding your knowledge of web technology this is an inevitable step.

I understand exactly what you said since I have done a website in php with database (mySQL and PhPmyAdmin). But to be honest I am new to java-script and trying to find the way that when you hit submit button on form.html, you will display confirm.html show what you entered, by using only Javascript function. Can you be more specific in "add some code to confirm.html to unpack this"? — Ronaldinho Learn Coding, Oct 14 '12 at 19:41
The basic idea here is that you can't directly pass information between pages, but you can create a URL which contains more information than which page to load. So, you have to first add this data to the URL on form submission, then unpack it. The link I put in my answer provides a function for getting a variable from a URL. Alternatively, you can try a [library like URI.js](https://github.com/medialize/URI.js), which has some very nice features for manipulating this kind of stuff. — Bubbles, Oct 14 '12 at 19:53

Submit HTML form to display entered info in new page

2 Answers2