Question

我在获取jquery以显示表单数据摘要时遇到问题。我有两个div在摘要页面中并排放置

以下是适用的HTML和jquery代码段。

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();

}）;

Answer 1

不确定你的问题究竟是什么，但我猜测表单被发送并且页面被重新加载。您需要在单击提交按钮时禁用默认行为：

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

Answer 2

我注意到您的一些选择器缺少#：

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

应该都是：

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

此外，正如v1cious所提到的，您需要阻止点击事件中的默认操作。

Answer 3

您可以尝试这样的事情：

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();

当然，您可以对其进行调整以使其更具动态性。这只是原则:)）

JQuery摘要页面问题

3 个答案: