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);
      });
});

提交表格时

停止默认事件（提交），否则表单提交会立即停止后续代码，并且ajax调用永远不会启动 - 这是使用preventDefault()方法完成的;
进行帖子调用，传递使用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);
                });
            });
    });
});

隐藏div然后发布表单

3 个答案: