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

Question

我在下面有一个示例代码块，它包含一个简单的 bootstrap 表单，我使用 jqueryUI 模态对话框来替代基本的 javascript 确认 window.

当我通过单击提交按钮提交表单时，jqueryUI 模态 window 会毫无问题地弹出。

如果;

我点击 "No" - 我收到了所有 3 console.log 条消息，即

1-Confirmation_In_Progress
4-Confirmation_Cancelled
5-Confirmation_Cancelled

如果;

我点击 "Yes" - 我收到了所有 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>

上面的代码块是通过参考 Whosebug 上的各种片段组合在一起的，但不知何故我无法提交表单。如果我删除 jquery 行并使用基本的 javascript 确认 window - 表单正确提交。

Answer 1

我创建了一个测试 fiddle 并尝试重现该问题。我不能。最好先定义对话框，然后再定义事件。

例如：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-Confirmation_Cancelled
5-Confirmation_Cancelled

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

1-Confirmation_In_Progress
2-Confirmation_AboutTo
3-Confirmation_Done

表单然后尝试提交（并且失败，因为它无法在 fiddle. 中将自己提交给自己）。

希望对您有所帮助。

Answer 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 条件不是基于按钮 name/value，所有这些表单提交都有效。

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

谢谢。

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

jQuery Confirmation Dialog Modal - Unable to Submit Form Sucessfully

javascript

twitter-bootstrap

forms

dialog

jquery-ui-dialog