我该如何在HTML5表单中的提交按钮上添加确认对话框？

Question

我正在使用 Django 创建一个应用程序，遇到了下一个问题：我在 HTML 中有一个表单和一个提交按钮，但我想在处理信息之前显示一个确认对话框以选择“是”或“否”。我该如何实现?

这是我的表单代码：

<form id="id" method="post" action="/y/b/" enctype="multipart/form-data">

    {% csrf_token %} 

    {{ form.as_p }}

    <input class="btn btn-primary" type="submit" name="submit" value="A" />
</form>

非常感谢！

- jartymcfly

Answer 1

如果你只想从用户那里得到确认，那么在表单标签中像这样加入onsubmit属性。

https://jsfiddle.net/yetn60ja/

<form id="id"
    method="POST" action="/y/b/"
    enctype="multipart/form-data"
    onsubmit="return confirm('Do you really want to submit the form?');"
>
    <input class="btn btn-primary"
        type="submit" name="submit" value="A"
    />
</form>

编辑：或尝试以下代码

<form id="id"
    method="POST" action="/y/b/"
    enctype="multipart/form-data"
>
    <input class="btn btn-primary"
        type="submit" name="submit" value="A"
        onclick="return confirm('Do you really want to submit the form?');"
    />
</form>

- Akki619

---

我尝试过了，但它没有显示确认对话框，直接处理了代码... - jartymcfly

好的，我知道了！谢谢！！ - jartymcfly

我有另一个问题。确认对话框出现了，但提交处理继续进行，而不是出现对话框。为什么会发生这种情况？ - jartymcfly

Answer 2

在提交之前，您需要创建一个函数来检查用户是否想确认请求。 您可以使用“confirm（）”函数与preventDefault（）停止提交，如果为true，则发送提交或更改type = submit为按钮，并在函数中仅确认用户是否要继续并发送请求。

- Luiz Pillon

---

我猜你没有使用Jquery，所以请创建以下函数：function checkConfirm(){ var conf = confirm("是否继续？"); (conf) ? document.getElementById("id").submit(); : alert("请求已取消！"); }并将你的按钮更改为： <input class="btn btn-primary" type="button" name="submit" value="A" onclick="checkConfirm();"> - Luiz Pillon

Answer 3

试试这个：

<script>
    var element = document.getElementById('submitBtn').click = function () {
           if(confirm("Are sure you want to submit the form")) {
               // do what ever you want if the form is submitted.
           }
        };
</script>

在你的按钮中添加id属性

<input id='submitBtn' class="btn btn-primary" type="submit" name="submit" value="A" />

注意：最好将 script 标签添加到你的 HTML head 标签内。

- Kiren S

Answer 4

请查看以下链接。

Fiddle

 function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
    }
}

- Steevan

Answer 5

你可以安装JQuery插件或编写自定义代码

 <input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
    <div id="dialog-confirm"></div>
<script>
function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
   }
} </script>

安装 JQuery 插件 jquery.confirm

- Muhammad Nasir

Answer 6

在其onclick事件上添加一个JavaScript函数。 例如：

<input class="btn btn-primary" type="submit" onclick="clicked();" name="submit" value="A" /> 

并添加JavaScript函数

function clicked() {
       if (confirm('Do you wanna to submit?')) {
           yourformelement.submit();
       } else {
           return false;
       }
    }

- Venkatvasan

---

如果有人尝试这个不起作用，可以改用 windows.confirm。 - Muhammad Mubashirullah Durrani