Question

我使用了几年前提出的另一个问题的代码 Implement jQuery confirmation modal in a form submit?

但是这个问题还远远不足以说明在回答“是”时如何提交表单而我无法使其发挥作用。

你会看到我尝试过的所有方法（它们被注释掉了）。有谁知道我在这里做错了什么？

     <div id="dialog-confirm" title="Ready?">
         <p>Are you sure?</p>
     </div>

    <form action"" id="myform" name="myform2" type="post">
        <input type="submit" value="Yes" name="moveOn" />
    </form>

     <script>
      $(function() {
        $("#dialog-confirm").dialog({
         resizable: false,
         height:190,
         autoOpen: false,
         width: 330,
         modal: true,
         buttons: {
           "Yes": function() {
             //$('#myform')[0].submit();
             //document.myform2.submit();
             //document.getElementById("#myform").submit();

              },
        No: function() {
           $(this).dialog("close");
         }
     }

   });

    $('#myform').submit(function() {
       $("#dialog-confirm").dialog('open');
       return false;
       });

       });

Answer 1

在这里试试这个。不要使用提交按钮，而是将按钮设置为普通按钮并处理其单击事件。然后，如果用户点击是，您只需提交表单。您还有一些语法错误，例如不需要的表单操作<form action""，根本删除操作，您将以相同的形式发布。

您的代码略有变化

<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form id="myform" name="myform" method="post">
    <input type="hidden" name="moveOn" value="Yes" />
    <input type="button" id="moveOn" value="Yes" />
</form>

<script>
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 190,
            autoOpen: false,
            width: 330,
            modal: true,
            buttons: {
                "Yes": function() {
                    $('#myform').submit();
                },
                No: function() {
                    $(this).dialog("close");
                }
            }
        });

        $('#moveOn').on('click', function(e) {
            $("#dialog-confirm").dialog('open');
        });
    });
</script>

<强>更新

我已更新我的代码以使用隐藏字段将moveOn post变量传递给PHP。表单内的更改为：

<input type="hidden" name="moveOn" value="Yes" />
<input type="button" id="moveOn" value="Yes" />

更新2

似乎还有一个错误阻止表单提交数据。它的格式type="post"当然是不正确的，要设置正确的表单方法，您需要使用method="post"：

<form id="myform" name="myform" method="post">
...
</form>

您可以在此处尝试我的示例：http://zikro.gr/dbg/html/submit-confirm/

以下是我的示例工作的屏幕截图：

更新3

我想你已经有了一个PHP代码，可以在脚本开始时处理POST数据，如下所示：

<?php 

if(isset($_POST['moveOn']) && $_POST['moveOn'] == 'Yes') {
    echo '<h3>The form was posted!</h3>';
}

?>

Answer 2

您遇到的问题是：当您单击“是”时，将再次调用提交处理程序。

要解决此问题，您可以使用trigger event with extraParameters来区分是否从对话框中触发提交。

因为对话框是异步的，所以你可以使用延迟方法，这是我给出的旧答案here。

代码和jsfiddle：

$(function () {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        //
        // Instead to submit the form trigger the
        // submit event with a parameter.....
        //
        $('#myform').trigger('submit', true);
      },
      No: function() {
        $(this).dialog("close");
      }
    }
  });

  $('#myform').submit(function(e) {
    //
    // Test if the submit event has been triggered from within the dialog
    //
    alert(arguments.length);
    if (!(arguments.length == 2 && arguments[1] === true)) {
      $("#dialog-confirm").dialog('open');
      return false;
    } else {
       // submitted
    }
  });


});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form action="" id="myform" name="myform2" type="post">
<input type="submit" value="Yes" name="moveOn" />
</form>

Answer 3

一个简单的解决方案是设置一个标志，检查您是否已经点击了＆＃34;是＆＃34;：

$(function() {
  var postForm = false;
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        postForm = true;
        $('#myform').submit();
      },
      "No": function() {
        $("#dialog-confirm").dialog("close");
      }
    }
  });

  $('#myform').on('submit', function(e) {
    if(!postForm) {
      e.preventDefault();
      $("#dialog-confirm").dialog('open');
    } else {
      console.log('form submitting...')
    }
  });
});

请参阅此处查看有效的JSFiddle

另一种解决方案是禁用提交表单（使用e.preventDefault（））并在点击＆＃34后手动发布表单数据;是＆＃34;使用AJAX：

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        $.ajax({
          type: "POST",
          url: $('#myform').attr('action'),
          data: $('#myform').serialize(),
          success: function(response) {
            console.log('form submitted');
          }
        });
      },
      "No": function() {
        $("#dialog-confirm").dialog("close");
      }
    }
  });

  $('#myform').on('submit', function(e) {
    e.preventDefault();
    $("#dialog-confirm").dialog('open');
  });
});

Answer 4

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

<div id="dialog-confirm" title="Ready?">
  <p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
  <input type="submit" value="Yes" name="moveOn" />
</form>

这应该有效。

HTML：

<div id="dialog-confirm" title="Ready?">
<p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
<input type="submit" value="Yes" name="moveOn" />

JS：

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

工作jsfiddl。

jquery表单以模态提交确认

4 个答案: