[英]Bootstrap Modal before form Submit
我是Modals的新手,我有一个表格,当用户点击提交时,它会显示一个模态确认用户是否想要提交,该模式还包含来自表单字段的用户输入。 我搜索了整个互联网,但找不到合适的我的需求。 我只看到他们将click事件标记为在链接上打开模态。 我有一个输入类型提交。 你能举出例子或想法吗? 谢谢! 这是我的样本表格。
<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" data-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
上运行该函数,然后在检查验证后加载模式。
$('form button[type="submit"]').on('click', function () {
$(this).parents('form').submit();
});
我注意到一些答案没有触发HTML5 required
属性(因为在点击操作上执行的东西而不是表单发送的操作,导致在输入为空时绕过它):
<form id='xform'></form>
带有一些带有必需属性的输入,并在最后放置一个<input type='submit'>
。 <input type='text' name='xconf' value='' required>
modal_1_accept
添加到accept按钮。 modal_2_accept
添加到accept按钮。 m2_Txt
添加到显示的文本持有者。 在发送表单之前拦截JS:
$("#xform").submit(function(e){ var msg, conf, preventSend; if($("#xform").attr("data-send")!=="ready"){ msg="Error."; //default error msg preventSend=false; conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, ""); if(conf===""){ msg="The field is empty."; preventSend=true; }else if(conf!=="ok"){ msg="You didn't write \\"ok\\" correctly."; preventSend=true; } if(preventSend){ //validation failed, show the error $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg $("#modal_2_errMsg").modal("show"); }else{ //validation passed, now let's confirm the action $("#modal_1_confirm").modal("show"); } e.preventDefault(); return false; } });
`9。 从模态中单击按钮时还有一些东西:
$("#modal_1_accept").click(function(){
$("#modal_1_confirm").modal("hide");
$("#xform").attr("data-send", "ready").submit();
});
$("#modal_2_accept").click(function(){
$("#modal_2_errMsg").modal("hide");
});
重要说明:因此,如果您添加额外的方式来显示模态,请注意,只需单击“接受”按钮$("#modal_1_accept")
将假定验证已通过,并将添加"ready"
属性:
$("#modal_1_confirm").modal("show");
仅在通过验证时显示,因此在未首先验证表单的情况下,无法访问$("#modal_1_accept")
。 您可以使用浏览器默认提示窗口。 而不是基本的<input type="submit" (...) >
尝试:
<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>
它很容易解决,只创建一个隐藏的提交:
<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >
使用jQuery,您单击提交:
$("#submitCadastro").click(function(){
if($("#checkDocumentos").prop("checked") == false){
//alert("Aceite os termos e condições primeiro!.");
$("#modalERROR").modal("show");
}else{
//$("#formCadastro").submit();
$("#submitCadastroHidden").click();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.