Question

我有一个收集用户信息的表单：我希望保留这些信息的一部分，并将表单转发给包含其他信息的操作。

我的表格：

<form id="my_form" action="http://place_this_should_submit_after_ajax.com" method="post">
    <input type="hidden" name="post_url" id="post_url" value="url_ajax_call_will_post_data_to">
    <input type="text" name="name_val" id="name_val">
    <input type="text" name="email_val" id="email_val">
    <input type="text" name="amount_val" id="amount_val">
    <input type="submit" name="submit" value="praying to god">
</form>

我的JQUERY：

$(function() {

    $("#my_form").submit( function(e) {

        e.preventDefault();

        name = $("#name_val").val();
        email = $("#email_val").val();
        amount = $("#amount_val").val(); // data form.ACTION will need this info

        // Validate form field values...

        if (validation form field errors) {
            // do error stuff...
        } else {

            // the place I want to send data before posting form to "form.ACTION"
            var post_url = $("#post_url").val();

            // ALL of the data on the form that my #post_url will scrape and store
            var post_data = form.serialize();

            // post the form data to the post_url to collect data out of post_data
            $.ajax({
                type : 'POST',
                url : post_url,
                data : post_data});

            // My pathetic attempt to tell the form to go to form.ACTION
            return true;



        }
    });
}

编辑1：

现在表单发布到ajax调用，成功运行页面，但不会将页面发布到form.ACTION（http://place_this_should_submit_after_ajax.com）。这是此页面的预期结果。

编辑2：

虽然我已经检查了@Jasen提交的解决方案，但它并不是一个完整的解决方案。但它确实解决了95％的问题。通过获取未在按钮上提交的表单数据来纠正剩下的问题。单击。

extended from the solution submitted by @Jasen

<form id="my_form" ...>
    ...
    <button class="submit-btn">praying to god</button>
</form>

// Correct way to instantiate a button.CLICK
$(".submit-btn").click(function(e) {
    e.preventDefault();

    // THIS IS REQUIRED TO GET THE DATA FROM THE FORM GIVEN THE FORM ISN'T SUBMITTED VIA A BUTTON.CLICK
    var post_data = $("#my_form").serialize();

    $.ajax({
        type: 'POST',
        url: post_url,
        data: post_data
    })
    .done(function(result) {
       $("#my_form").submit();
    });
});

Answer 1

我认为您只需删除e.preventDefault();即可。这将停止表单的提交方法的默认操作。

Answer 2

指定preventDefault与return true相矛盾，因此您的表单永远不会以默认方式提交。

$("#my_form").on("submit", function(e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: post_url,
        data: post_data
    })
    .done(function(result) {
       // if your form submission relies on the ajax result
       // you should do the second post in a callback
       $("#my_form").submit();
    });
});

修改

我错过了上面的问题 - 提交处理程序执行另一次提交，你可能会在循环中结束。

相反，挂钩按钮的点击事件。

<form id="my_form" ...> ... <button class="submit-btn">praying to god</button> </form> $(".submit-btn").on("click", function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: post_url, data: post_data }) .done(function(result) { $("#my_form").submit(); }); });

jQuery + Ajax表单提交：从表单中抓取并存储数据，转发到操作 - 如何？

2 个答案: