Take value from on input to an input on the next page?

Question

I have an input field in a form - lets say:

<form action="/subscribe">
  <input type="emailadress" id="emailme" value="Email Address" />
  <input type="submit" value="Subscribe" class="cat_button" />
</form>

Then on the next page (subscribe.html) I have a full form.

What I'm trying to do is have the user enter their email address then press subscribe.

It takes you to subscribe.html

When you get to that page, your email address is already pre-filled.

EDIT : I don't have access to server side programming - only Javascript, HTML and CSS.

I'm looking into HTML5 session storage but have had no luck.

Is this possible?

Answer 1

This is certainly possible. If you want an entirely client-side solution, one approach might be to capture the click event using a Javascript click listener, select the two elements in the form and read their values, and place those values into the session store. In the Javascript for the subscribe.html page, be sure to read out the values from the session store and fill in the appropriate input elements in the subscribe.html page.

Javascript + jQuery for first html page

$(document).ready(function() {
("myform").click(function() {
    var useremail = ("selector_for_email").val();
    sessionStore.setitem("useremail", useremail);
    // Don't preventDefault, allow form POSTing
});
});

Javascript + jQuery for the second html page

$(document).ready(function() {
        var useremail = sessionStore.getItem("useremail");
        ("input_elem").val(useremail);
    });

If you're open to a solution that involves the client and server, simply allow the user to submit the form (sending a POST message). In the route handler for subscribe, read out the POSTed data and populate the elements in the view template with the input values.

Python Back-end

@app.route('/subscribe')
def subscribe():
    if request.method == 'POST':
        useremail = request['name_attr_of_email_input']
        return render_template(subscribe.html, email=useremail)

Answer 2

To do this with php, all you'd need to do is submit the form you've created (after appending a 'method="post"' to the form element, and giving your text input a name of, say, "emailme").

<form action="/subscribe.php" method="post">
  <input type="emailadress" name="emailme" id="emailme" value="Email Address" />
  <input type="submit" value="Subscribe" class="cat_button" />
</form>

From there, you'd change subscribe.html to a .php file, and do something like this on subscribe.php:

<?php
$email_address = $_POST['emailme'];

echo '<input type="emailadress" name="emailme2" id="emailme2" value="' . $email_address . '" />';
?>

Or:

<?php
$email_address = $_POST['emailme'];
?>

<input type="emailadress" name="emailme2" id="emailme2" value="<?php echo $email_address; ?>" />