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

Question

我有一个示例代码块，其下面包含一个简单的引导程序表单，我使用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上引用各种片段而放在一起的，但不知怎的，我只是不能让表单提交。如果我删除jquery行并使用基本的javascript确认窗口 - 表单正确提交。

Answer 1

另一答案