Display a summary of form element values before submit

Posted by Dirty Bird Design on Stack Overflow See other posts from Stack Overflow or by Dirty Bird Design
Published on 2012-06-01T04:32:21Z Indexed on 2012/06/01 4:41 UTC
Read the original article Hit count: 187

Filed under:

Using jquery formtowizard.js with an ajax submit. I want the last step of the form to display a summary of all form fields that were filled out. I can get it to work in isolated test cases, but not in full use. Form

<form id="Commission" method="post" action="PHP/CommissionsSubmit.php">
    <fieldset id="Initial">
        <legend>Enter Your Information</legend>
        <ul>
            <li>
                <label for="FName">First Name*</label><input type="text" name="FName" id="FName">
            </li>
         //repeat many li's
        </ul>
    </fieldset>
    <fieldset>
    <legend>Second Step</legend>
    //more li's
    </fieldset>
    <fieldset>
    <legend>Confirmation</legend>
    <span id="CFName"></span>
    </fieldset>
</form>

the jquery to get "#CFName" value

$('#FName').keyup(function() {
   $('#CFName').val($(this).val());
});

I can't get the value to appear in the span "#CFName"... Could this have to do with the "serialize" function or anything going on with my $ajax submit function? its happening before submit... Please help!

I apologize, but I've gone back and forth with "#CFName" being a span and an input, using .val and .html respectively

© Stack Overflow or respective owner

Related posts about jQuery