jQuery 确认对话框模式 - 无法成功提交表单答案

【问题标题】：jQuery Confirmation Dialog Modal - Unable to Submit Form SucessfullyjQuery 确认对话框模式 - 无法成功提交表单
【发布时间】：2017-12-29 19:43:06
【问题描述】：

我在下面有一个示例代码块，它包含一个简单的引导表单，我使用 jqueryUI 模式对话框作为基本 javascript 确认窗口的替代品。

当我通过单击提交按钮提交表单时，jqueryUI 模式窗口会弹出而没有任何问题。

如果;

我点击“否” - 我收到所有 3 条 console.log 消息，即

1-Confirmation_In_Progress
4-Confirmation_Cancelled
5-Confirmation_Cancelled

如果;

我点击“是” - 我收到所有 3 条 console.log 消息，即

1-Confirmation_In_Progress
2-Confirmation_AboutTo
3-Confirmation_Done

因此我得出结论，jquery 代码必须在某种程度上工作，但表单值似乎没有发布。

我尝试了各种方法来提交如下所示的表单。知道我的 jquery 表单提交有什么问题吗？

表格代码如下；

<!DOCTYPE html>
<html>
<head>

<title> Simple BootStrap Form -  jQuery UI Modal Dialog as Confirmation Box </title>
<meta charset="utf-8"> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans"                                              rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"              media="all" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"             rel="stylesheet" type="text/css">    
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"                                    rel="stylesheet" type="text/css">


 <!-- CSS -->
 <style>

 .customColor    { background: darkturquoise; } 
 .jqDialogAdjust { float: left; margin: 2px 2px 0 0; }  
 .no-close .ui-dialog-titlebar-close { display: none }

 </style>     


 </head>
 <!-- HTML -->
 <body>

 <div class="container">
 <br><br>
   <a href="<?php echo $_SERVER['PHP_SELF']; ?>"> HOME </a>
 <br><br>

 <?php
 if ( isset($_POST['submit_btn']) ) {

   echo "<br>"."<br>";
   echo "Name :".$_POST['name']."<br>";
   echo "Email :".$_POST['email']."<br>";

 } else { 

 ?>  

 <form id="simpleform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"  >

 <div class="form-group">
   <label for="name">Your Name:</label>
   <input type="text" class="form-control" name="name" id="name">
 </div>
 <div class="form-group">
   <label for="email">Your Email:</label>
   <input type="email" class="form-control" name="email" id="email">
 </div>

 <button type="submit"  class="btn btn-default"  name="submit_btn" id="submit_btn"  value="submit_btn" >Submit</button>

 </form>

 <div id="confirmdialog" title="Confirmation Required"></div>

 <?php } ?>
 </div>

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"                                                    type="text/javascript"></script> 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"                                                 type="text/javascript"></script>    
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"                            type="text/javascript">  </script>         

 <script type="text/javascript" >    


  $(document).ready(function(){


      $("#submit_btn").click(function(event){  

      console.log('1-Confirmation_In_Progress');

      event.preventDefault();      
      var $target = $( event.target );    
      var message = 'Proceed With Action?';
      var icon = '<span class="ui-icon ui-icon-alert jqDialogAdjust" ></span>';

      $('#confirmdialog').html('<p>' + icon + message + '</p>');

      $("#confirmdialog").dialog({
          autoOpen : false,
          modal : true,
          height: 170,
          width: 340,
          resizable: false,
          draggable:false,
          closeOnEscape: true,
          title : " :: Confirmation Required :: ",             
          classes: {
                        "ui-dialog-titlebar": "ui-corner-all customColor"                          
                    },
          dialogClass: "no-close",         
          buttons: [{
                        text : "Yes",                           
                        click : function() {                                    
                                  console.log('2-Confirmation_AboutTo'); 
                                  //die;                                  
                                $target.closest("form").submit();
                                //$('form#simpleform').submit();
                                  console.log('3-Confirmation_Done');                          
                                $(this).dialog("close");                               
                        }                              
                    },                        
                    {
                        text : "No",
                        click : function() {
                                  console.log('4-Confirmation_Cancelled');
                                $(this).dialog("close");
                                  console.log('5-Confirmation_Cancelled');
                        }
                    }]   



      });   // end of confirmdialog.dialog  

    $('#confirmdialog').dialog('open');      

    }); // end of submit_btn.click(function(event)    

  }); // end jQuery Document Ready

  </script>
  </body>
  </html>

上面的代码块是通过在 StackOverFlow 上引用各种 sn-ps 组合在一起的，但不知何故我就是无法提交表单。如果我删除 jquery 行并使用基本的 javascript 确认窗口 - 表单会正确提交。

【问题讨论】：

我怀疑$(event.target).closest() 没有选择表单。控制台中是否有任何错误或警报？
@Twisty-我点击“是”-我收到所有 3 条 console.log 消息，即 1-Confirmation_In_Progress 2-Confirmation_AboutTo 3-Confirmation_Done
@Twisty - 在 jQuery 中替换 Javascript 确认框（return confirm ()）似乎很麻烦。你用什么？
没有办法替换，因为浏览器自己生成了对话窗口。我已经解决了这个问题；这并不完全有趣。见这里：stackoverflow.com/questions/39453976/… 我创建了以下代码来解决这个问题：jsfiddle.net/Twisty/7kp46r22/3 这使用$.Deferred 和$when() 在返回结果或执行任何回调之前等待用户做出选择。
@Twisty - 注意。我有一个更新。看起来我的问题是 if ( isset($_POST['submit_btn']) )。使用 jQuery，提交表单时不会发送提交按钮。如果我将 if 条件更改为姓名或电子邮件，则 jquery 表单提交有效！

标签： javascript twitter-bootstrap forms dialog jquery-ui-dialog

【解决方案1】：

我创建了一个测试小提琴并尝试复制该问题。我不能。最好先定义 Dialog，然后再定义事件。

例如：https://jsfiddle.net/Twisty/f0sa5nmL/

JavaScript

$(function() {
  $("#confirmdialog").dialog({
    autoOpen: false,
    modal: true,
    height: 170,
    width: 340,
    resizable: false,
    draggable: false,
    closeOnEscape: true,
    classes: {
      "ui-dialog-titlebar": "ui-corner-all customColor"
    },
    dialogClass: "no-close",
    buttons: [{
      text: "Yes",
      click: function() {
        console.log('2-Confirmation_AboutTo');
        $("#simpleform").submit();
        console.log('3-Confirmation_Done');
        $(this).dialog("close");
      }
    }, {
      text: "No",
      click: function() {
        console.log("4-Confirmation_Cancelled");
        $(this).dialog("close");
        console.log("5-Confirmation_Cancelled");
      }
    }]
  });

  $("#submit_btn").click(function(event) {
    console.log("1-Confirmation_In_Progress");
    event.preventDefault();
    $("#confirmdialog").dialog("open");
  });
});

如果我选择否，我会得到：

1-Confirmation_In_Progress
4-确认_取消
5-Confirmation_Cancelled

表单未提交，对话框关闭。如果我选择是，我会得到：

1-Confirmation_In_Progress
2-Confirmation_AboutTo
3-确认_完成

然后表单尝试提交（但失败，因为它无法在小提琴中将自己提交给自己。）。

希望对您有所帮助。

【讨论】：

罗杰@Twisty。会坚持下去的。

【解决方案2】：

正如我在上面对用户 Twisty 的评论中提到的，看起来我的问题是这一行；

  if ( isset($_POST['submit_btn']) ) {

      echo "<br>"."<br>";
      echo "Name :".$_POST['name']."<br>";
      echo "Email :".$_POST['email']."<br>";

  }

Jquery 表单提交不包括按钮名称和值到 post 超全局中。将 if 更改为 'name' 或 'email' 允许显示 post 值。

只要 if 条件不是基于按钮名称/值，所有这些表单提交都有效。

 $target.closest("form").submit();                                      
 $('form[name="simpleform"]').submit();                                    
 $('form#simpleform').submit();
 document.forms["simpleform"].submit();
 document.getElementById("simpleform").submit()
 $('#simpleform').submit();

谢谢。

【讨论】：