CODEWITHSUNDEEP
jqueryhtml
brohjoe
brohjoe

Reputation: 932

JQuery summary page issues

I'm having problems getting jquery to display a summary of form data. I have two divs that are placed side-by-side within the summary page

Here is the applicable HTML and jquery snippets.

HTML:

 <div id="fourth_step">

 <div class="form">
 <h2>Summary</h2>

 <div id="formLeft">
 <p>First Name:</p><p></p>
 <p>Middle Name:</p><p></p>
 <p>Last Name:</p><p></p>
 <p>Address:</p><p></p>
 <p>City:</p><p></p>
 <p>Zip:</p><p></p>
 <p>DOB:</p><p></p>
 <p>SSN:</p><p></p>
 </div>


 <div id="formRight">
 <p>Home Phone:</p><p></p>
 <p>Work Phone:</p><p></p>
 <p>Cell Phone:</p><p></p>
 <p>Employer:</p><p></p>
 <p>Emergency Contact:</p><p></p>
 <p>Emergency Relationship:</p><p></p>
 <p>Emergency Day Phone:</p><p></p>
 <p>Email Address:</p><p></p>
 </div>


 </div>
 <!-- clearfix -->
 <div class="clear"></div>
 <!-- /clearfix -->
 <input class="back" type="button" value=""/>
 <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value=""/>
 </div>

</form>
</div>
<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">0% Complete</div>
</div>

JQuery:

$('#submit_fourth').click(function () {
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width', '339px');

//prepare the fifth step
var fields1 = new Array(
    $('#firstname').val() + ' ' + $('lastname').val(),
    $('#middlename').val(),
    $('#lastname').val(),
    $('#address').val(),
    $('#city').val(),
    $('#zip').val(),
    $('#dob').val(),
    $('ssn').val()
)

var fields2 = new Array(
    $('homephone').val(),
    $('workphone').val(),
    $('cellphone').val(),
    $('employer').val(),
    $('emergency').val(),
    $('relationship').val(),
    $('phoneday').val(),
    $('phonenight').val(),
    $('email').val()
);

var formLeft = $('#fifth_step #formLeft  p');
formLeft.each(function () {
    //alert( fields[$(this).index()] )
    $(this).children('#formLeft:nth-child(2)').html(fields1[$(this).index()]);
});

var formRight = $('#fifth_step #formRight  p');
formRight.each(function () {
    //alert( fields[$(this).index()] )
    $(this).children('#formRight:nth-child(2)').html(fields2[$(this).index()]);
});

//slide steps
$('#fourth_step').slideUp();
$('#fifth_step').slideDown();

});

Upvotes: 2

Views: 177

Answers (3)

doydoy44
doydoy44

Reputation: 5772

You can try something like this:

HTML:

<input id="firstname" value="aaa">
<input id="middlename" value="zzz">
....
<div id="formLeft">
 <p>First Name:</p><p id="result_first_name"></p>
 <p>Middle Name:</p><p id="result_middle_name"></p>
....
 </div>

JQUERY

$('#result_first_name').html($('#firstname').val()).text();
$('#result_middle_name').html($('#middlename').val()).text();

Of course, you can adapt it to make it more dynamic. It is only the principle :)

Upvotes: 1

Robert Messerle
Robert Messerle

Reputation: 3032

I noticed that a number of your selectors are missing their #:

$('ssn').val()
...
$('homephone').val(),
$('workphone').val(),
$('cellphone').val(),
$('employer').val(),
$('emergency').val(),
$('relationship').val(),
$('phoneday').val(),
$('phonenight').val(),
$('email').val()

Should all be:

$('#ssn').val()
...
$('#homephone').val(),
$('#workphone').val(),
$('#cellphone').val(),
$('#employer').val(),
$('#emergency').val(),
$('#relationship').val(),
$('#phoneday').val(),
$('#phonenight').val(),
$('#email').val()

Also, as v1cious mentioned, you need to prevent the default action in the click event.

Upvotes: 2

urz0r
urz0r

Reputation: 462

not really sure what your problem is exactly but i'm guessing the form gets sent and the page gets reloaded. you need to disable the default behaviour on clicking the submit button:

$('#submit_fourth').click(function (e) {
  e.preventDefault();
  //update progress bar
  ...

Upvotes: 2

Related Questions