我是 Modals 的新手,我有一个表单,当用户点击提交时,它会显示一个确认用户是否要提交的模态框,该模态框还包含来自表单字段的用户输入。我搜索了整个互联网,但找不到适合我需要的那个。我所看到的只是他们标记了点击事件以在链接上打开模式。我有一个输入类型提交。你能举出例子或想法吗?谢谢!这是我的示例表单。
<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" />
<div class="form-group">
<label>Last Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
</div>
<div class="form-group">
<label>First Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
</div>
<input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
<input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>
最佳答案
所以如果我做对了,点击一个按钮,你想打开一个模式,列出用户输入的值,然后提交它。
为此,您首先将 input type="submit"
更改为 input type="button"
并添加 data-toggle="modal"数据-target="#confirm-submit"
以便在您单击它时触发模式:
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
接下来是模态对话框:
<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>Last Name</th>
<td id="lname"></td>
</tr>
<tr>
<th>First Name</th>
<td id="fname"></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>
最后,一点jQuery:
$('#submitBtn').click(function() {
/* when the button in the form, display the entered values in the modal */
$('#lname').text($('#lastname').val());
$('#fname').text($('#firstname').val());
});
$('#submit').click(function(){
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#formfield').submit();
});
您还没有指定函数 validateForm()
的作用,但是基于此您应该限制您的表单被提交。或者您可以在表单的按钮 #submitBtn
上运行该函数,单击并在验证通过后加载模式。
关于javascript - 表单提交前的 Bootstrap Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23775272/