隱藏DIV然後發佈形式

Question

我還在我的多階段形式（http://jsfiddle.net/xSkgH/93/），並已納入了以下解決方案，以幫助阿賈克斯提交：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#postData").click(function() { 
     $("#last-step").hide(600); 

      $("#task5_booking").submit(function() { 
       $.post('resources/process2.php', function(data) { 
        $("#result").html(data); 
       }); 
      }); 

     return false; 
    }); 
}); 
</script> 

它淡出的最後一步很好，但說到加載了內容OT process2.php這簡直就是所有的表單字段的數組：

<?php 
print_r($_POST); 
?> 

一切似乎都發生在所有。該div保持空白。真的很感謝任何幫助的人。提前致謝。

Answer 1

如果您通過ajax調用資源，則還應該沿着調用傳遞序列化表單。因此，假設$("#task5_booking")是你的表單元素

$("#task5_booking").submit(function(evt) { 
     evt.preventDefault(); 
     $.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) { 
      $("#result").html(data); 
     }); 
}); 

當您提交表單

1. 停止默認事件（提交），否則表單提交立即停止後續代碼和Ajax調用永遠不會發生 - 這是採用preventDefault()方法完成;
2. 進行郵寄呼叫，傳遞與serialize()方法（請參閱http://api.jquery.com/serialize/）序列化的表單。

也請注意，由傑克指出你在擺弄形式有camperapplicationForm ID而不是task5_booking

Answer 2

我想你應該刪除您submit功能：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#postData").click(function() { 
     $("#last-step").hide(600); 


     $.post('resources/process2.php', function(data) { 
      $("#result").html(data); 
     }); 

     return false; 
    }); 
}); 
</script> 

Answer 3

$(document).ready(function() { 
    $("#postData").click(function(e) { 
     e.preventDefault(); 
     $("#last-step").hide(600); 

      $("#task5_booking").submit(function() { 
       $.post('resources/process2.php', $(this).serialize(), function(data) { 
        $("#result").html(data); 
       }); 
      }); 
    }); 
});