0

我正在尝试添加一个 jQuery 模式对话框来确认表单。四处搜索，发现一些看起来很有希望并且似乎也可以工作的代码。当我确认时弹出对话框并提交表单。但是，$_POST 数组是空的。

现在，当我禁用 e.preventDefault() 函数时，后数组就可以了。但随后对话框将不会保持打开状态。我玩弄了代码，但无法修复它。这是精简的页面代码：

<?php
   print_r($_POST);
?>
<html>
<head>
   <script type="text/javascript" src="jquery-1.9.1.js"></script>
   <script type="text/javascript" src="jquery-ui-1.10.1.custom.js"></script>
   <link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
   <form name="formAnnList" id="formAnnList" method="post">
      <input name="btn_delete" type="submit" class="button" value="Delete">
   </form>

   <!-- Delete confirmation dialog -->
   <div id="delDialog" title="Confirmation">
      <p>
         <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> 
         Are you sure
      </p>
   </div>

   <script type="text/javascript">
   $(function(){       
      $('#delDialog').dialog({
         autoOpen: false,
         width: 280,
         modal: true,
         resizable: false,
         buttons: {
            "Ok": function(){ document.formAnnList.submit(); },
            "Cancel": function(){ $(this).dialog("close"); }
         }
      });

      $('form#formAnnList').submit(function(e){
         e.preventDefault();
         $('#delDialog').dialog('open');
      });
   });
   </script>
</body>
</html>

欢迎任何想法。
最好的问候，
乔治

4

2 回答 2

0

感谢您的输入，我想通了。由于 preventDefault() 正在清除表单数据，因此方法是不通过同时提交表单的元素触发对话框。所以我创建了一个 type="button" 的按钮并给它 id="btn_delete_confirm"。单击它将打开对话框，确认对话框将提交表单。我刚刚在表单中添加了一个隐藏按钮，该按钮用作 $_POST 数组中传输的删除事件。

这是有效的更改代码。您将看到 $_POST 数组包含我现在可以做出反应的隐藏按钮： 

  <?php
     print_r($_POST);
  ?>
  <html>
     <head>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.1.custom.js"></script>
        <link rel="stylesheet" href="jquery-ui.css">
     </head>
     <body>
        <form name="formAnnList" id="formAnnList" method="post">
           <input id="btn_delete_confirm" type="button" class="button" value="Delete">
           <input name="btn_delete" type="hidden" class="button" value="Delete">
        </form>

        <!-- Delete confirmation dialog -->
        <div id="delDialog" title="Confirmation">
           <p>
              <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> 
              Are you sure
           </p>
        </div>

        <script type="text/javascript">
        $(function(){       
           $('#delDialog').dialog({
              autoOpen: false,
              width: 280,
              modal: true,
              resizable: false,
              buttons: {
                 "Ok": function(){ document.formAnnList.submit(); },
                 "Cancel": function(){ $(this).dialog("close"); }
              }
           });

           $('input#btn_delete_confirm').click(function(){
              $('#delDialog').dialog('open');
           });
        });
        </script>
     </body>
  </html>

再次感谢。总是有助于与专业人士交谈。
最好的问候，
乔治

于 2013-05-01T11:44:33.813 回答
0

它是空的，因为preventDefault()提交数据的停止方法。您可以修改它以序列化数据：

$("#formAnnList").serialize();

然后手动使用 ajax 或 post 方法发送。


（未经测试）的东西：

...
buttons: {
            "Ok": function(){
                 $.ajax({
                     url: //url here
                     data: $("#formAnnList").serialize()
                 })
            },
            ...
         }

来自 jQuery文档的 preventDefault ：

如果调用该方法，则不会触发事件的默认动作。

于 2013-04-30T19:23:16.277 回答