表单，提交前确认confirm()，有好办法么？

Posted 2023-04-09

比如下面这个按钮

<input type="button" value="删除" OnServerClick="fileDel_ServerClick" runat="server" />

作用是按了后删除什么东西，想给他加个确认，即按了按钮后跳出一个确认框，确定后才执行，否则不执行。

于是按照网上的办法给他加个属性：
onclick="return confirm('确定删除？');"

最后生成的html代码如下：
<input onclick="return confirm('确定删除文章？'); __doPostBack('ctl07','')" type="button" value="删除" />

但是没有作用，无论是确认还是取消，后面的__doPostBack()部分都没执行。

又在网上查了一下文章，说
onclick="return confirm('确定删除？');"
这样不行，必须：
onclick="if(confirm('确定删除？'))elsereturn false;;"
必须这样。

我试了一下，确实成功了。但是总感觉
onclick="if(confirm('确定删除？'))elsereturn false;;"
又长又臭，于是做了个js函数：
function confirmX(xxx)
if(confirm(xxx))elsereturn false;
;
给相应的按钮加入这个属性：
onclick="confirmX('确定删除？');"

结果这样，又出问题了，无论是确认还是取消，后面的__doPostBack()部分都会执行。

我的问题是，有没有一个简单优雅的办法解决这个问题？每个需要确定的按钮都加一个形如
onclick="if(confirm('确定删除？'))elsereturn false;;"
的属性显得很臃肿，把它做成js函数后又没法用，或者是我函数写错了？

参考技术A 首先最好把input换成asp:button控件，这样可以同时使用onclick（服务器端事件）和onclientclick（客户端事件）

<asp:Button ID="btnDelete" runat="server" Text="删除" onclick="btnDelete_Click" OnClientClick="return confirm('确认要删除？')"/>

参考资料：http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.button.onclientclick(VS.80).aspx

参考技术B 脚本定义一个类是myconfirm窗体

添加连个方法show，用于显示提示窗口
添加两个事件afterConfirm， afterCancel

脚本调用onclick的时候，创建myconfirm一个实例，并且绑定他的afterConfirm， afterCancel这两个事件，就是两个函数而已。

即可搞定你的问题吧

或者用现成的脚步库 参考技术C 为控件添加onclientclick事件 触发return confirm
为OnClientClick=“return confirm('确定？')”

如果想更方便，那就在页面基类中重写初始化事件，遍历page控件中的button控件，为该控件注册确认删除事件 参考技术D onclick="confirmX('ctl07','');"

function confirmX(a,b)
if(confirm("确定删除么？"))
__doPostBack(a,b)

elsereturn false;

表单提交前的引导模式

【中文标题】表单提交前的引导模式

【英文标题】：Bootstrap Modal before form Submit

【发布时间】：2014-07-09 15:04:55

【问题描述】：

我是模态框的新手，我有一个表单，当用户单击提交时，它会显示一个模态框，确认用户是否要提交，模态框还包含来自表单字段的用户输入。我搜索了整个互联网，但找不到适合我需要的那个。我所看到的只是他们标记了点击事件以在链接上打开模式。我有一个输入类型提交。你能举出例子或想法吗？谢谢！这是我的示例表单。

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>

【问题讨论】：

您能告诉我们您使用引导模式和 jQuery 的尝试吗？

我正在尝试这个。 bootply.com/59864 我想实现它。你能帮帮我吗？

您是否尝试过使用引导平台打开一个模态框？使用此文档：Bootstrap modal

【参考方案1】：

所以如果我做对了，点击一个按钮，你会想要打开一个模式，列出用户输入的值，然后提交它。

为此，您首先将您的input type="submit" 更改为input type="button" 并添加data-toggle="modal" data-target="#confirm-submit" 以便在您单击它时触发模态：

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

接下来，模态对话框：

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

最后，一点点 jQuery：

$('#submitBtn').click(function() 
     /* when the button in the form, display the entered values in the modal */
     $('#lname').text($('#lastname').val());
     $('#fname').text($('#firstname').val());
);

$('#submit').click(function()
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
);

您尚未指定函数validateForm() 的作用，但基于此您应该限制您的表单被提交。或者您可以在表单的按钮 #submitBtn 上运行该功能，然后在检查验证后加载模式。

DEMO

【讨论】：

嗨，非常感谢你，这正是我所需要的。 :) 但是我有问题，当我将

@user3651491 你从哪里得到空白数据？如果这与您的验证有关，您应该在单击按钮时运行validateForm()，如果仅满足验证，则加载模式。

很好的答案。但请不要使用 .html() 输出值。请改用 .text。用户不希望能够在该字段中输入 html。另一方面，如果用户实际上输入了一些浏览器不理解的标签，他就会丢失他的输入。

@Jeff 感谢您解释原因。已更正。

如果有多个表单，并且希望为每个表单提交显示确认模式（可以是表单，也可以是带有删除操作的列表），那么这个方法将失败，因为在 $('#submit').click 处理程序中，没有关于提交哪个表单的信息。

【参考方案2】：

您可以使用浏览器默认提示窗口。 而不是基本的<input type="submit" (...) > 尝试：

<button onClick="if(confirm(\'are you sure ?\')) this.form.submit() ">Save</button>

【参考方案3】：

$('form button[type="submit"]').on('click', function () 
   $(this).parents('form').submit();
);

【参考方案4】：

很容易解决，只创建一个隐藏提交：

<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >

使用 jQuery 你点击提交：

$("#submitCadastro").click(function()
    if($("#checkDocumentos").prop("checked") == false)
        //alert("Aceite os termos e condições primeiro!.");
        $("#modalERROR").modal("show");
    else
        //$("#formCadastro").submit();
        $("#submitCadastroHidden").click();                     
    
);

【讨论】：

Me ajudou.... Quando tentava enviar através do botão no modal dava erro pois não enviava os dados do form... dessa forma resolveu o problema, obrigado。

【参考方案5】：

我注意到一些答案没有触发 HTML5 required 属性（因为东西是在 clicking 的动作而不是 form send 的动作上执行的，导致在输入为空时绕过它）：

有一个<form id='xform'></form>，其中包含一些具有所需属性的输入，并在末尾放置一个<input type='submit'>。 需要输入“ok”的确认输入<input type='text' name='xconf' value='' required> 在您的 html 中添加 modal_1_confirm（以确认发送形式）。 （在 modal_1_confirm 上）将 id modal_1_accept 添加到接受按钮。 向您的 html 添加第二个 modal_2_errMsg（以显示表单验证错误）。 （在 modal_2_errMsg 上）将 id modal_2_accept 添加到接受按钮。 （在 modal_2_errMsg 上）将 id m2_Txt 添加到显示的文本框。

表单发送前要拦截的JS：

$("#xform").submit(function(e)
    var msg, conf, preventSend;

    if($("#xform").attr("data-send")!=="ready")
        msg="Error."; //default error msg
        preventSend=false;

        conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");

        if(conf==="")
            msg="The field is empty.";
            preventSend=true;
        else if(conf!=="ok")
            msg="You didn't write \"ok\" correctly.";
            preventSend=true;
        

        if(preventSend) //validation failed, show the error
            $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
            $("#modal_2_errMsg").modal("show");
        else //validation passed, now let's confirm the action
            $("#modal_1_confirm").modal("show");
        

        e.preventDefault();
        return false;
    
);

`9.从模式中单击按钮时还有一些东西：

$("#modal_1_accept").click(function()
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
);

$("#modal_2_accept").click(function()
    $("#modal_2_errMsg").modal("hide");
);

重要提示：因此，如果您添加额外的方式来显示模式，请小心，因为只需单击接受按钮 $("#modal_1_accept") 将假定验证已通过，它将添加 "ready"属性：

原因是$("#modal_1_confirm").modal("show"); 在通过时仅显示 验证，所以点击 $("#modal_1_accept") 应该是 没有先验证表单就无法访问。