Question

我有一个带有提交和取消按钮的表单，我希望显示不同的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;
    }
};

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

我已经查看了以下问题，但我仍然面临着这个问题

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>

进一步修改

我在click事件中调用confirmDialog函数相应的按钮，如下所示：

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

Answer 1

您的按钮具有提交

的默认行为

替换

<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>

Answer 2

表格提交仅在＆＃34; onsubmit＆＃34;得到＆＃34;假＆＃34;来自Javascript处理程序。

试试这个

＆＃34;返回submitForm ...＆＃34; （而不仅仅是＆＃34; submitForm ...＆＃34;）

（2.在功能关闭括号后删除分号）

<强>更新

问题可能是input type=submit和$("#myform").submit();

如果<form onsubmit=...未收到false（例如来自函数返回），则会提交表单。

如果<input type=submit onclick=...未收到false（例如来自函数返回），则会执行按钮操作（表单提交）。

未使用input type=submit的原始（未经检查）解决方案选项：

HTML

<form id="myform" onsubmit="formValidation()">
    <button value="Submit" onclick="buttonHandler(true)">
    <button value="Cancel" onclick="buttonHandler(false)">
</form>

JS

function formValidation()
{
    return $("#myform").valid();
}

function buttonHandler(isSubmit)
{
    if (isSubmit ==== true)
    {
        if (confirm(submitMessage) === true)
        {
            $("#myform").submit();
        }
    }
    else
    {
        if (confirm(cancelMessage) === true)
        {
            $("#myform").submit();
        }
    }
}

Answer 3

您的<button>代码的type属性似乎有submit作为其值，只需删除HTML代码中的type="submit"属性并将其保持为{ {1}}

<button id="cancel".... />

这将解决您的问题。希望这有帮助！

Answer 4

如果使用输入标记而不是按钮标记，并且通过保留类来保留样式，则可以使其工作。 e.g。

<input id="SomeId" 
class="btn btn-danger btn-block" 
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />

Answer 5

我遇到了类似的问题，并通过click事件解决了该问题，这与您的问题非常相似。

尝试一下：

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

    return false;
});

希望有帮助。

Answer 6

您的标记的type属性似乎已提交作为其值，只需删除HTML代码中的type="submit"属性并将其保留

<button id="cancel".... />

取消确认仍然提交表格

6 个答案: