0

I want to make it so:

  1. User fills out a form

  2. User clicks Submit

  3. Redirect user to a page that thanks him for his registration and show him a summary of the information he entered.

Basically, I want to transfer form values set in one HTML file to another.

<html>

    <head>
    </head>

    <body>

        <form>
            First name: <input type="text" name="firstname"><br>
            Last name: <input type="text" name="lastname"><br>
            Address: <input type="text" name="address"><br>
            City: <input type="text" name="city"><br>
            State: <input type="text" name="state"><br>
            Zip: <input type="text" name="zip"><br>
            Phone Number: <input type="text" name="phone"><br>

            Affiliation:<br>
            <input type="radio" name="affil" value="demo">Democrat<br>
            <input type="radio" name="affil" value="green">Green Party<br>
            <input type="radio" name="affil" value="liber">Liberterian<br>
            <input type="radio" name="affil" value="repub">Republican<br>
            <input type="radio" name="affil" value="None">Unafiiliated<br>

            <input type="submit" value="Submit">

        </form>

    </body>
</html>

I only want to do this with HTML/Javascript and not PHP or ASP

Fernando Carvalhosa
  • 1,098
  • 1
  • 15
  • 23
Angelo Rivera
  • 121
  • 1
  • 1
  • 11

2 Answers2

0

You have to submit the GET request to the page. The form variables should be encoded in the URL and you can extract them.

See this answer for an implementation of the extractor.

Community
  • 1
  • 1
Mikayla Maki
  • 473
  • 6
  • 18
0

A very easy way to do it would be to use HTML5 Web Storage. It's very easy to use, but not supported on every browser (only modern ones). One way to learn how to use it and which browsers are supported is to check out this link: http://www.w3schools.com/html/html5_webstorage.asp

Just store your values from your form in Javascript (using jQuery or regular javascript). Register a "submit" event handler so that you can save the form values before redirecting the user to the new page. When you get to your new page, then read the storage to retrieve the values.

    $("form").submit(function() {
       var values = {
            firstname: $('input[name=firstname]').val(),
            lastname: $('input[name=lastname]').val(),
            address: $('input[name=address]').val(),
            city: $('input[name=city]').val(),
            state: $('input[name=state]').val(),
            zip: $('input[name=zip]').val(),
            phone: $('input[name=phone]').val(),
            affil: $('input[name=affil]:checked').val()
        },
        formAsString = JSON.stringify(values);

    sessionStorage.setItem("myForm", formAsString);
});

On your second page, you can read the values saved on the first page. I've omitted any error checking that you would definitely want to make sure that saved data exists.

function readFormValues() {
    var savedFormValues = sessionStorage.getItem("myForm"),
        savedFormAsObject = JSON.parse(savedFormValues),
        html = "";

    html += "<p>Thanks for registering!<br>";
    html += "Summary:<br />";
    html += "First Name: " + savedFormAsObject.firstname + "<br />";
    html += "Last Name: " + savedFormAsObject.lastname + "<br />";
    // etc.
}

You could also accomplish the same thing, following the same process, by using cookies instead of Web Storage.

Or, like other answers said, stick all of the values in the URL on your redirect, and then read them out of the URL when you get to your new page.

JVNick
  • 92
  • 4