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

I am creating an application in django and 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 Yes or No before processing the information. How could I do it?

我在django中创建了一个应用程序,我遇到了下一个问题:我在html中有一个带有提交按钮的表单,但我想在处理信息之前显示一个确认对话框以选择是或否。我怎么能这样做?

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!

非常感谢!

6 个解决方案

#1

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

如果您只是想要用户确认,请在表单标记中使用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>

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>

#2

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

#3

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

#4

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 script tag inside your html head tag

注意:最好在html head标记内添加脚本标记

#5

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.

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

#6

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

#1