如何在使用 jquery confirm 提交表单之前显示确认框？

Posted 2023-05-09

【中文标题】如何在使用 jquery confirm 提交表单之前显示确认框？

【英文标题】：How to display a confirm box before submitting a form using jquery confirm?

【发布时间】：2018-02-11 17:11:00

【问题描述】：

我有一个表格，我想在点击提交按钮后显示一个确认消息，而且我不想使用以下方法

return confirm("Are You Sure?")

我使用JQuery Confirm如下。

@using (@html.BeginForm("SubmitTest", "HydrostaticReception", FormMethod.Post, new id="ReceptionForm", onsubmit = "ValidateMyform(this);" ))
    
    .....
    <button onclick="SubmitMyForm()">Submit</button>
    

javascript 代码是...

function ValidateMyform(form) 
        // get all the inputs within the submitted form
        var inputs = form.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) 
            // only validate the inputs that have the required attribute
            if (inputs[i].hasAttribute("required")) 
                if (inputs[i].value == "") 
                    // found an empty field that is required
                    alert("Fill all fields");
                    return false;
                
            
        
        return true;

显示确认框的Javascript代码（根据JQuery Confirm）是

function SubmitMyForm() 
        $.confirm(
            title: 'Confirm!',
            content: 'Are you sure?',
            buttons: 
                No: function () 
                    return true;
                ,
                Yes: function () 
                    $("#ReceptionForm").submit();
                    //alert("For Test");
                    //document.getElementById("ReceptionForm").submit();
                
            
        );

问题是......

当我点击提交按钮时，它不会等待我在确认框中点击是按钮，然后表单将提交（确认框出现，1 秒后消失并提交表单）。

但是当我使用 alert("For Test"); 而不是 $("#ReceptionForm").submit(); 时，它可以正常工作。有人知道我为什么会遇到这个问题吗？！！！

【问题讨论】：

默认情况下，您的按钮是提交按钮（因此您需要<button type="button"> 但您应该处理表单.submit() 事件并在单击“否”按钮时取消它。那就是不是验证方式 - 在您的属性上使用验证属性并启用客户端验证（使用 jquery.validate.js 和 jquery.validate.unobtrusive.js)

您不会阻止函数中的默认（表单提交），因此它会提交。这可能会有所帮助***.com/q/3350247/125981

斯蒂芬和马克，感谢你们两位，因为你们有用的 cmets。

【参考方案1】：

您可以使用“标志”来了解确认是否发生以"prevent default" 提交行为。

删除内联 onsubmit = "ValidateMyform(this);" 并改用 jQuery 事件处理程序。

var confirmed = false;
$("#ReceptionForm").on("submit", function(e)

  // if confirm == true here
  // And if the form is valid...

  // the event won't be prevented and the confirm won't show.
  if(!confirmed && ValidateMyform($(this)[0]) )
    e.preventDefault();

    $.confirm(
      title: 'Confirm!',
      content: 'Are you sure?',
      buttons: 
        No: function () 
          return;
        ,
        Yes: function () 
          confirmed = true;
          $("#ReceptionForm").submit();
        
      
    );
  
);

【讨论】：

应该return true;真的是return false;吗？

随便..这个返回没有任何效果。回来吧。