Passing form field content to same form field on a new page

Question

I have a form field for "E-mail" address and I want to set up a small form at the top of each page that has a field for "E-mail Address" and then a Sign up button that takes you to a page to complete a detailed form for mailing list subscription. The two things I'm having problems with:

• How do I pass the data entered in the form to the E-mail address on the dedicated "Mailing List" page?
• How do I redirect to the user to the dedicated "Mailing List" page when they click "Submit"?

Answer 1

How do I pass the data entered in the form to the E-mail address on the dedicated "Mailing List" page?

Use the correct name attribute for the email input.

How do I redirect to the user to the dedicated "Mailing List" page when they click "Submit"?

You can define this using the action attribute of the form element:

<form action="mailing-list.php" action="post">
 …
</form>

Answer 2

As you look ready to use javascript to pass data, why not go one step further and have a single page for your functionality.

And with javascript you show or hide the form you want the user to see.
Or even you build a single form and you show or hide some additional fields between the 2 states.

In these configurations, reading values in the same page is very easy.
And the user experience will be better.

Edit (after a desperate comment ;)

In the BODY of your page set a form like that:

<form action="javascript:void(0)" >
    <input type="text" name="email" />
    <input type="submit" value="sign up!" onclick="signUp(this.form)"/>
</form>
<script>
    function signUp(form){
        window.location.href = 'signUp.html?email=' + form.email.value;
    }
</script>    

And in the BODY of the signup page:

<form id="frm" action="javascript:void(0)" >
    <input type="text" />
    <input type="text" name="email" />
    <input type="submit" value="register!" onclick="register(this.form)"/>
</form>

<script>
    function urlParam(name, w){
        w = w || window;
        var rx = new RegExp('[\&|\?]'+name+'=([^\&\#]+)');
        var val = w.location.href.match(rx);
        return !val ? '':val[1];
    }

    var frm = document.getElementById('frm');
    frm.email.value = urlParam('email');
</script>

When you click the button of the first form, the url is built with a parameter to the signup page.

The signup page is loaded, and then we get the reference of the form, read the value of the url with the function "urlParam" and place the value to the field named "email"