logo标签列表

使用模态框确认的 jQuery 表单提交

jqueryformsmodal-dialog
6
我使用了几年前另一个问题的代码（实现jQuery确认模态框在表单提交中的应用？） 但这个问题没有详细说明如何在点击 Yes 后提交表单，我一直无法使其正常工作。
你可以看到我尝试了很多方法，但都注释掉了。请问有人知道我在这里做错了什么吗？
     <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;
       });

       });
这里有一个已经回答过的可行解决方案： https://dev59.com/8Gw15IYBdhLWcg3wtNuO?noredirect=1&lq=1 - Meghdad Hadidi
1
谢谢，但这些解决方案不使用模态。 - Allen
4个回答
12

试试这个方法。不要使用提交按钮，将按钮制作成普通按钮并处理其单击事件。然后，仅当用户点击 是 时才提交表格。另外，你还有一些语法错误，比如这个不必要的表单操作 <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/

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

enter image description here

更新3

我假设您已经有了一个处理脚本开始时POST数据的PHP代码，就像下面这个示例：

<?php 

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

?>
看一下这里.. https://usc.thrivezone.org/z.php 我有这段代码 if (isset($_REQUEST['moveOn']) && $_REQUEST['moveOn']=='Yes'){ echo "submitted"; } 应该会输出 submitted 这个单词, 但它并没有..我做错了什么吗？ - Allen
@Allen 是的，你说得完全正确！请查看我的更新答案。 - Christos Lytras
@Allen 是的，你需要将 <form type="post" 改为 <form method="post"。请看一下我的更新答案。 - Christos Lytras
2
你遇到的问题是：当你点击“YES”时，提交处理程序会再次被调用。
要解决这个问题，你可以使用带有额外参数的触发事件来区分提交是从对话框内部还是外部触发的。
由于对话框是异步的，你可以使用延迟的方法，我在这里提供了一个旧的答案：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>
看起来这应该可以运行..我已经添加了你建议的，但它仍然无法提交（即使我尝试在此站点上运行代码片段）。 - Allen
是的，您可以在此处查看（在云服务器上运行）https://usc.thrivezone.org/z.php - Allen
至少对我而言它没有成功。成功提交后应该会显示“已提交”。 - Allen
好的，我已经将您的代码放在我的网站usc.thrivezone.org/z.php上，但我仍然无法提交（我已经删除了您添加的警报）。至于提交后的消息，我只想要它提交，并且我使用PHP来输出“已提交”（如果实际提交成功）。 - Allen
@Allen 我为你感到高兴。 - gaetanoM
显示剩余4条评论
0
一个简单的解决方案是设置一个标志，检查您是否已经点击了“是”：
$(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()），并在点击“是”后手动使用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');
  });
});
谢谢。好的，您可以在此处查看第一个解决方案，但似乎无法提交 https://usc.thrivezone.org/z.php ，由于该网站的工作方式，我不能使用ajax解决方案。 - Allen
0

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

还有一个可用的jsFiddle。

谢谢...这变得有点混乱了...我看到在jsfiddle上它可以工作，但是如果你去这里（我复制了你的代码），它没有触发模态框。https://usc.thrivezone.org/z.php 我错过了什么吗？ - Allen
代码在$('#myform')..on('submit', function(e)处出现错误。你需要加一个点号。所以应该是$('#myform').on('submit', function(e)。 - Kalimah
谢谢，已修复。现在如果你再尝试一遍，它将无法工作，因为它会立即提交。 - Allen
我没有遇到这个错误..那个引用看起来是针对另一个问题的...你是怎么在我的代码中看到这个的（实际上是你的代码）？ - Allen
是的，我一直在使用Firebug... 这里有一个视频，显示了你的准确代码在我的服务器上运行，并且没有错误，并且可以立即提交。https://db.tt/pnXER8LyhK - Allen
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接