[英]Bootstrap Modal before form Submit
I'm new to Modals, I have a Form and when the user clicks submit, It will show a Modal confirming if the user wants to submit, the modal also contains the user input from the form fields. 我是Modals的新手,我有一个表格,当用户点击提交时,它会显示一个模态确认用户是否想要提交,该模式还包含来自表单字段的用户输入。 I searched all over the internet but can't find the right one on my needs.
我搜索了整个互联网,但找不到合适的我的需求。 And all I see is that they tag the click event to open modal on aa link.
我只看到他们将click事件标记为在链接上打开模态。 i have a input type submit.
我有一个输入类型提交。 Can you give examples or ideas?
你能举出例子或想法吗? Thanks!
谢谢! Here's my sample form.
这是我的样本表格。
<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>
So if I get it right, on click of a button, you want to open up a modal that lists the values entered by the users followed by submitting it. 因此,如果我做对了,单击按钮,您需要打开一个模式,列出用户输入的值,然后提交它。
For this, you first change your input type="submit"
to input type="button"
and add data-toggle="modal" data-target="#confirm-submit"
so that the modal gets triggered when you click on it: 为此,首先将
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" />
Next, the modal dialog: 接下来,模态对话框:
<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>
Lastly, a little bit of jQuery: 最后,一点点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();
});
You haven't specified what the function validateForm()
does, but based on this you should restrict your form from being submitted. 您尚未指定
validateForm()
函数的功能,但基于此,您应该限制表单的提交。 Or you can run that function on the form's button #submitBtn
click and then load the modal after the validations have been checked. 或者您可以在表单的按钮
#submitBtn
上运行该函数,然后在检查验证后加载模式。
$('form button[type="submit"]').on('click', function () {
$(this).parents('form').submit();
});
I noticed some of the answers were not triggering the HTML5 required
attribute (as stuff was being executed on the action of clicking rather than the action of form send , causing to bypass it when the inputs were empty): 我注意到一些答案没有触发HTML5
required
属性(因为在点击操作上执行的东西而不是表单发送的操作,导致在输入为空时绕过它):
<form id='xform'></form>
with some inputs with the required attribute and place a <input type='submit'>
at the end. <form id='xform'></form>
带有一些带有必需属性的输入,并在最后放置一个<input type='submit'>
。 <input type='text' name='xconf' value='' required>
<input type='text' name='xconf' value='' required>
modal_1_accept
to the accept button. modal_1_accept
添加到accept按钮。 modal_2_accept
to the accept button. modal_2_accept
添加到accept按钮。 m2_Txt
to the displayed text holder. m2_Txt
添加到显示的文本持有者。 The JS to intercept before the form is sent: 在发送表单之前拦截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. `9。 Also some stuff when clicking the Buttons from the modals:
从模态中单击按钮时还有一些东西:
$("#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");
});
Important Note: So just be careful if you add an extra way to show the modal, as simply clicking the accept button $("#modal_1_accept")
will assume the validation passed and it will add the "ready"
attribute: 重要说明:因此,如果您添加额外的方式来显示模态,请注意,只需单击“接受”按钮
$("#modal_1_accept")
将假定验证已通过,并将添加"ready"
属性:
$("#modal_1_confirm").modal("show");
$("#modal_1_confirm").modal("show");
is shown only when it passed the validation, so clicking $("#modal_1_accept")
should be unreachable without first getting the form validated. $("#modal_1_accept")
。 You can use browser default prompt window. 您可以使用浏览器默认提示窗口。 Instead of basic
<input type="submit" (...) >
try: 而不是基本的
<input type="submit" (...) >
尝试:
<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>
It is easy to solve, only create an hidden submit: 它很容易解决,只创建一个隐藏的提交:
<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >
with jQuery you click the submit: 使用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.