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

Posted 2023-02-22

【中文标题】如何将确认对话框添加到 html5 表单中的提交按钮？

【英文标题】：How can I add confirmation dialog to a submit button in html5 form?

【发布时间】：2015-11-04 22:55:53

【问题描述】：

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

这是我的表单代码：

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

非常感谢！

【参考方案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>

【讨论】：

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

好吧，我明白了！谢谢！！

我还有一个问题。出现确认对话框，但提交处理继续显示对话框的出现。为什么会这样？

【参考方案2】：

请查看以下链接。

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

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

【参考方案4】：

试试这个：

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

注意：最好在你的html中添加script标签head标签

【参考方案5】：

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

【讨论】：

我想你没有使用 Jquery，所以： 创建你的函数： function checkConfirm() var conf = confirm("wish to continue?"); （会议）？ document.getElementById("id").submit(); : alert("请求取消！");并将您的按钮更改为：

【参考方案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;