jQuery preventdefault清除$ _POST

我想添加一個jQuery模式對話框來確認表單。搜索了一下，發現一些看起來很有前途的代碼，似乎也有效。當我確認時，彈出對話框並提交表格。但是，$ _POST數組是空的。

現在，當我禁用e.preventDefault（）函數時，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 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>

任何想法都歡迎。
最好的問候，
喬治

來源

2013-04-30 George

你的表格沒有輸入（除按鈕），所以這將是奇怪的，如果'$ _POST'是不是空的。 – zeroflagL 2013-04-30 19:48:46

btn_delete應該在數組中tho – George 2013-04-30 21:01:41

按鈕的值只有在被點擊後纔會被提交。 'document.formAnnList.submit（）'不會點擊一個按鈕;） – zeroflagL 2013-04-30 21:06:12

它是空的，因爲提交您的數據preventDefault()停止方法。您可以修改此序列化數據：

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

，然後手動使用AJAX或郵寄方式發送。

東西（未測試）：從jQuery的documentation

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

的preventDefault：

如果此方法被調用時，事件的默認操作將不會被觸發。

來源

2013-04-30 19:23:16 WooCaSh

我建議再次讀取OP代碼。 – zeroflagL 2013-04-30 19:46:51

我忘了彈出？或錯過了別的？ – WooCaSh 2013-04-30 19:54:35

'document.formAnnList.submit（）' - 只要用戶點擊確定按鈕，就會立即提交表單^^ – zeroflagL 2013-04-30 19:56:23

感謝您的輸入，我想通了。由於preventDefault（）會清除表單數據，因此方法是不要通過同時提交表單的元素來觸發對話框。所以我創建了一個type =「button」的按鈕，並給了它id =「btn_delete_confirm」。點擊它將打開對話框，確認對話框將提交表單。我只是將一個隱藏的按鈕添加到作爲在$ _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>

感謝：您將看到$ _POST數組包含隱藏按鈕，我現在可以產生反應。總是有助於與專業人士交談。
最好的問候，
喬治

來源

2013-05-01 11:44:33 George

jQuery preventdefault清除$ _POST

回答

相關問題