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

Question

I have a sample code block below which consists of a simple bootstrap form whereby I am using a jqueryUI Modal Dialog as a replacement for the basic javascript confirmation window. 我下面有一个示例代码块，其中包含一个简单的引导程序表单，在此示例中，我使用jqueryUI模态对话框替代基本的JavaScript确认窗口。

When i submit the form by clicking the submit button, the jqueryUI modal window does popup without any issues. 当我通过单击“提交”按钮提交表单时，jqueryUI模态窗口会弹出而没有任何问题。

If; 如果;

I click "No" - I get all 3 console.log messages ie 我单击“否”-我收到所有3条console.log消息，即

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

If; 如果;

I click "Yes" - I get all 3 console.log messages ie 我单击“是”-我收到所有3条console.log消息，即

1-Confirmation_In_Progress 1-Confirmation_In_Progress
2-Confirmation_AboutTo 2-确认_关于
3-Confirmation_Done 3-确认_完成

Therefore I conclude the jquery code must be working to some extent BUT the form values dont seem to be posted. 因此，我得出结论，jQuery代码必须在某种程度上起作用，但是表单值似乎并未发布。

I have tried various methods to submit the form as seen below. 我尝试了各种方法来提交表单，如下所示。 Any idea what is wrong with my jquery form submission ? 知道我的jquery表单提交有什么问题吗？

The form code is below; 表单代码如下；

<!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>

The above code block was put together by refering to various snippets here on StackOverFlow but somehow I just cant get the form to submit. 上面的代码块通过引用StackOverFlow上的各种代码片段组合在一起，但是以某种方式我无法获取表单。 If i remove the jquery lines and use a basic javascript confirm window - the form submits properly. 如果我删除了jquery行并使用基本的javascript确认窗口-表单提交正确。

Answer 1

I created a test fiddle and tried to replicate the issue. 我创建了一个测试小提琴，并试图复制该问题。 I could not. 我不能。 It might be best to define your Dialog first and then the events. 最好先定义对话框，然后再定义事件。

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

JavaScript 的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");
  });
});

If I choose No, I get: 如果选择“否”，则会得到：

1-Confirmation_In_Progress
4-Confirmation_Cancelled
5-Confirmation_Cancelled

The form does not submit and the dialog closes. 表单未提交，对话框关闭。 If I choose Yes, I get: 如果选择“是”，则会得到：

1-Confirmation_In_Progress
2-Confirmation_AboutTo
3-Confirmation_Done

The form then attempts to submit (and fails since it can't submit itself to itself in the fiddle.). 然后，表单尝试提交（由于无法在小提琴中将自身提交给自己，因此失败了）。

Hope that helps. 希望能有所帮助。

Answer 2

As mentioned in my comment above to user Twisty, looks like my problem was this line; 正如我在上面对Twisty用户的评论中所提到的，看起来我的问题是这条线。

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

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

  }

Jquery form submission does not include the button names and values into the post superglobal. jQuery表单提交不包含按钮名称和值到超全局变量中。 Changing the if to either 'name' or 'email' allowed the post values to appear. 将if更改为'name'或'email'允许显示帖子值。

All these form submissions work as long as the if condition is NOT based on the button name/value. 只要if条件不是基于按钮名称/值的，所有这些表单提交都可以工作。

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

Thanks. 谢谢。

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

问题描述

2 个解决方案

解决方案1
0 2018-01-02 06:10:41

解决方案2
0 已采纳 2018-01-02 16:35:17

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

问题描述

2 个解决方案

解决方案1 0 2018-01-02 06:10:41

解决方案2 0 已采纳 2018-01-02 16:35:17

解决方案1
0 2018-01-02 06:10:41

解决方案2
0 已采纳 2018-01-02 16:35:17