在引导模式中显示表单输入
在引导模式中显示表单输入
提问于 2015-09-11 00:23:39
我需要显示用户输入从表单到模态。在提交表格之前，此模式将充当确认框。应该是这样的：
- 用户填写表单。
- 对表单进行验证，以检查所需字段
entry_check()。 - 验证后，模态窗口将打开并显示用户输入以进行确认。
- 确认后，将提交该表格。
码
<form role="form" id="ps_entry" name="ps_entry" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
<table>
<tr>
<td>Type</td>
<td>:</td>
<td>
<label>
<input type="radio" name="type" id="type" value="1" />Purchase</label>
<br />
<label>
<input type="radio" name="type" id="type" value="2" />Sale</label>
</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>
<input name="date" id="date" class="input" autocomplete="off" />
</td>
</tr>
<tr>
<td>Purchase Date</td>
<td>:</td>
<td>
<input name="pdate" id="pdate" class="input" autocomplete="off" />
</td>
</tr>
<tr>
<td>Remarks</td>
<td>:</td>
<td>
<textarea name="remarks" id="remarks" class="input" autocomplete="off"></textarea>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
</td>
</tr>
</table>
</form>
</p>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Confirm Submit</div>
<div class="modal-body">Are you sure you want to submit the following details?
<!-- We display the details entered by the user here -->
<table class="table">
<tr>
<th>Type</th>
<td id="typ"></td>
</tr>
<tr>
<th>Date</th>
<td id="dat"></td>
</tr>
<tr>
<th>Payment Date</th>
<td id="pdat"></td>
</tr>
<tr>
<th>Remarks</th>
<td id="remark"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="" id="submit" class="btn btn-success success">Submit</a>
</div>
</div>
</div>
</div>JS
$('#submitBtn').click(function () {
/* when the button in the form, display the entered values in the modal */
$('#typ').html($('#type').val());
$('#dat').html($('#date').val());
$('#pdat').html($('#pdate').val());
$('#remark').html($('#remarks').val());
});
$('#submit').click(function () {
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#ps_entry').submit();
});当我在JSFiddle http://jsfiddle.net/nvVBa/76/中尝试它时，它工作得非常完美。但是，当我在本地主机上尝试时，用户输入值不会显示在模式中。
Stack Overflow用户
发布于 2015-09-11 04:26:02
在模式中没有显示值的原因是JS没有DOM就绪，并且在HTML代码之上有脚本，如果您将脚本移动到HTML代码下面，它将工作或使Js DOM就绪，并将其放置在页面上的任何位置。
<script>
$(document).ready(function() {
$('#submitBtn').click(function () {
/* when the button in the form, display the entered values in the modal */
$('#typ').html($('#type').val());
$('#dat').html($('#date').val());
$('#pdat').html($('#pdate').val());
$('#remark').html($('#remarks').val());
});
$('#submit').click(function () {
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#ps_entry').submit();
});
});
</script>它会成功的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32513633
复制相关文章
相似问题
腾讯云开发者
