隐藏div然后发布表单

Question

我仍在研究我的多阶段表单（http://jsfiddle.net/xSkgH/93/），并已合并以下解决方案来帮助ajax提交：

<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. 进行 POST 调用，传递使用 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);
                });
            });
    });
});