gpt4 book ai didi

javascript - 取消确认仍然提交表格

转载 作者:行者123 更新时间:2023-11-29 21:08:50 26 4
gpt4 key购买 nike

我有一个带有提交和取消按钮的表单,我想在单击哪个按钮之前显示不同的 confirm 消息,所以这就是我想出的。

function confirmDialog(buttonId) {
switch (buttonId) {
case "cancel":
var result = confirm("cancel message");
submitForm(result);
break;
case "submit":
var result = confirm("Submit message");
submitForm(result);
break;
}
};

我的submitForm 函数看起来像

function submitForm(result) {
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid()) {
$("#myform").submit();
}
else {
return false;
}
};

现在我的问题是,当我单击取消时,表单仍然被提交。有人可以告诉我我做错了什么吗?我的 else 条件中有 return false; 所以我真的不知道为什么它仍然提交表单。

我看过以下问题,但我仍然面临这个问题

jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog

javascript confirm (cancel) still submits form when returning false

编辑:按要求取消按钮html

<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

进一步编辑

我在相应按钮的点击事件中调用了 confirmDialog 函数,如下所示:

 $("#cancel").click(function () {
var buttonId = $(this).attr("id");
confirmDialog(buttonId)
});

最佳答案

你的按钮有默认的提交行为

替换

<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

...更新后编辑试试这个代码....

替换你的代码

function submitForm(result) {
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid()) {
$("#myform").submit();
}
else {
return false;
}
};

   function submitForm(result) {
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid()) {
$("#myform").submit();
}
else {
const element = document.querySelector('myform');
element.addEventListener('submit', event => {
event.preventDefault();

console.log('Form submission cancelled.');
});
}
};

----- 如果您考虑更改您的 HTML 结构,则替代工作代码 ---

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function (e) {
e.preventDefault();
$('#MyForm').submit();
});
$("#btnCancel").click(function (e) {
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result) {
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e) {
e.preventDefault();
});
alert("Form Submission Canceled");
}
else {
$("#MyForm").submit();
alert("Form Submitted");
}
});
})
</script>
</body>
</html>

关于javascript - 取消确认仍然提交表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42695400/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com