Javascript点击确认表单提交和烧瓶应用程序

Question

我想在表单操作中添加确认信息：

        <form action="/delete" method="post">
            <button id="deleteForm" class="btn btn-danger" onclick="deleteConfirm(this.form)">Delete</button>
        </form>

在我的script.js中，我编写了一个函数：

function deleteConfirm() {
    
    let text = "Are you sure?\nOk=Delete all data.";
    if (confirm(text) == true) {
        document.getElementById("deleteForm").submit();
    } else {
        alert("Cancelled.");
    }
}

但是使用这些代码，当我单击“确定”或“取消”时，表单将提交。当我单击“取消”警报时，会显示该警报，但是操作/delete将执行。

这是酒瓶的特性吗？还有其他方法可以做到吗？

Answer 1

您需要将属性type=“按钮”添加到按钮中，id "deleteForm“添加到窗体中。

​

<form id="deleteForm" action="/delete" method="post">
  <button type="button" class="btn btn-danger" onclick="deleteConfirm(this.form)">Delete</button>
</form>

​

Answer 2

当用户单击"Cancel“时阻止表单提交，您可以在deleteConfirm()函数的末尾添加一个返回false；语句

let text = "Are you sure?\nOk=Delete all data.";
if (confirm(text) == true) {
    document.getElementById("deleteForm").submit();
} else {
    alert("Cancelled.");
    return false;
}

当用户单击“取消”时，禁止提交表单，但当用户单击“确定”时，表单仍将被提交。

编辑:

如果仍然无法工作，请将其包装在此：

function deleteConfirm() {

let text = "Are you sure?\nOk=Delete all data.";
if (confirm(text) == true) {
    return true;
} else {
    alert("Cancelled.");
    return false;
}
}

Answer 3

不需要使用按钮的onclick事件。相反，将type=“提交”附加在您的屁股上。并在表单中添加onsubmit属性。这是你提到的标准做法。

​

function deleteConfirm(myForm) {
    let text = "Are you sure?\nOk=Delete all data.";
    if (confirm(text) == true) {
        return true;
    } else {
        alert("Cancelled.");
        return false;
    }
}

<form action="/delete" method="post" onsubmit="return deleteConfirm(this);">
    <button id="deleteForm" type="submit" class="btn btn-danger">Delete</button>
</form>

​