php - 隐藏 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>

它很好地淡出最后一步，但是在加载内容时，它只是一个包含所有表单字段的数组：

<?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/）。

另请注意，正如杰克所指出的，您在小提琴中的表格有 camperapplicationFormid 而不是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);
                });
            });
    });
});