0

ユーザーから情報を収集するフォームがあります。この情報の一部を保持し、残りの情報とともにフォームをアクションに転送したいと考えています。

私のフォーム:

<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% 解決しました。残りの問題は、button.CLICK で送信されなかったフォーム データを取得することで修正されました。

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

2 に答える 2

0

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();
    });
});
于 2013-06-12T01:16:54.963 に答える