Form text display

Question

I am making a multi-page form using http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/. I want to include a confirmation page at the end that shows the other information (name, e-mail, etc.) as it was typed in without reloading the page. In essence, I want to show what the user typed in on another part of the page. I assume this would use jQuery. How can I do this?

Answer 1

You do it this way :

Assume this is the First Step :

<fieldset class="step">
            <legend>Account</legend>
            <p>
                <label for="username">User name</label>
                <input id="username" name="username" />
            </p>
            <p>
                <label for="email">Email</label>
                <input id="email" name="email" type="email" />
            </p>
            <p>
                <label for="password">Password</label>
                <input id="password" name="password" type="password" />
            </p>
        </fieldset>

Your Confirmation Step should look like this

<fieldset class="step">
            <legend>Confirm Your Account Information</legend>
            <p>
                <span id="username_confirmation"></span>
            </p>
            <p>
                <span id="email_confirmation"></span>
            </p>
            <p>
                <span id="password_confirmation"></span>
            </p>
        </fieldset>

And place this JQuery code on any part of the page

$(function(){ $('input[type="text"]').keyup(function() {$("#"+$(this).attr("id")+"_confirmation").html($(this).val());}); });

So basically what it did is to catch any keyup event on any textbox, check for an element with an ID of the related text box "plus" _confirmation. Let's say you're typing on username textbox, on every keyup it'll look for element of "username_confirmation" and change the content of "username_confirmation" into the same value of "username"