[英]How to display a confirm box before submitting a form using jquery confirm?
I have a form and I want to show a confirmation massage after clicking submit button and also I don't want to use following method 我有一个表格,我想在单击“提交”按钮后显示确认消息,并且我也不想使用以下方法
return confirm("Are You Sure?")
I used JQuery Confirm as following. 我使用了JQuery Confirm ,如下所示。
@using (@Html.BeginForm("SubmitTest", "HydrostaticReception", FormMethod.Post, new {id="ReceptionForm", onsubmit = "ValidateMyform(this);" }))
{
.....
<button onclick="SubmitMyForm()">Submit</button>
}
The javascript codes are ... JavaScript代码是...
function ValidateMyform(form) {
// get all the inputs within the submitted form
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
// only validate the inputs that have the required attribute
if (inputs[i].hasAttribute("required")) {
if (inputs[i].value == "") {
// found an empty field that is required
alert("Fill all fields");
return false;
}
}
}
return true;
}
The Javascript code for showing Confirm Box (According JQuery Confirm ) is 用于显示Confirm Box(根据JQuery Confirm )的Javascript代码为
function SubmitMyForm() {
$.confirm({
title: 'Confirm!',
content: 'Are you sure?',
buttons: {
No: function () {
return true;
},
Yes: function () {
$("#ReceptionForm").submit();
//alert("For Test");
//document.getElementById("ReceptionForm").submit();
}
}
});
}
The Problem IS... 问题是...
When I click Submit button it doesn't wait for me to click Yes button in Confirm box and the form will submit (the Confirm box appears and after 1 sec disappear and form submits). 当我单击“提交”按钮时,它不会等我单击“确认”框中的“是”按钮,然后表单将提交(出现“确认”框,并在1秒钟后消失并提交表单)。
But when I use alert("For Test"); 但是当我使用alert(“ For Test”); instead of $("#ReceptionForm").submit(); 而不是$(“#ReceptionForm”)。submit(); , it works correctly. ,它可以正常工作。 Does anybody knows why I'm facing this problem?!!! 有人知道我为什么要面对这个问题吗?!!!
You could use a "flag" to know if the confirmation occured or not to "prevent default" submit behavior. 您可以使用“标志”来知道是否进行确认,以“防止默认”提交行为。
Remove the inline onsubmit = "ValidateMyform(this);"
删除内联onsubmit = "ValidateMyform(this);"
and use a jQuery event handler instead. 并改用jQuery事件处理程序。
var confirmed = false;
$("#ReceptionForm").on("submit", function(e){
// if confirm == true here
// And if the form is valid...
// the event won't be prevented and the confirm won't show.
if(!confirmed && ValidateMyform($(this)[0]) ){
e.preventDefault();
$.confirm({
title: 'Confirm!',
content: 'Are you sure?',
buttons: {
No: function () {
return;
},
Yes: function () {
confirmed = true;
$("#ReceptionForm").submit();
}
}
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.