Javascript 如何将确认对话框添加到 html5 表单中的提交按钮？

How can I add confirmation dialog to a submit button in html5 form?

提问by jartymcfly

I am creating an application in djangoand I have the next problem: I have a form in html with a submit button, but I want to show a confirmation dialog to select Yesor Nobefore processing the information. How could I do it?

我正在创建一个应用程序，django我遇到了下一个问题：我有一个带有提交按钮的 html 表单，但我想显示一个确认对话框来选择Yes或No在处理信息之前。我怎么能做到？

This is my form code:

这是我的表单代码：

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

Thank you so much!

非常感谢！

回答by Akki619

Have onsubmitattribute in your form tag like this if you just want a confirmation from user.

onsubmit如果您只想得到用户的确认，请在您的表单标签中添加这样的属性。

https://jsfiddle.net/yetn60ja/

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>

EDIT:Or try below code

编辑：或尝试下面的代码

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

回答by Kiren Siva

Try this:

尝试这个：

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

And in your button add id attribute

并在您的按钮中添加 id 属性

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

Note: It is better to add scripttag inside your html headtag

注意：最好script在 htmlhead标签中添加标签

回答by Steevan

Check with the below link.

请查看以下链接。

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");
    }
}

回答by Muhammad Nasir

You can install JQuery plugin or write custom to code

您可以安装 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>

Install JQuery plugin jquery.confirm

安装 JQuery 插件jquery.confirm

回答by Luiz Pillon

Before the submit you need to create a function to check if the user want to confirm the request. You could use the "confirm()" function with the preventDefault() to stop the submit, and if true you send the submit or change your type=submit to a button, and in the function just confirm if the user want to continue and send the request.

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

回答by Venkatvasan

add a javascript function on its onclick event. for example:

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

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

and add the javascript function

并添加javascript函数

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