フォームの送信後にJqueryコールバックを行う方法は?


119

私はremote = trueのシンプルなフォームを持っています。

このフォームは実際にはHTMLダイアログ上にあり、[送信]ボタンをクリックするとすぐに閉じます。

次に、フォームが正常に送信された後、メインHTMLページに変更を加える必要があります。

私はjQueryを使用してこれを試しました。ただし、これは、フォーム送信の何らかの応答があった後にタスクが実行されることを保証するものではありません。

$("#myform").submit(function(event) {

// do the task here ..

});

フォームが正常に送信された後にのみコードが実行されるように、コールバックをアタッチするにはどうすればよいですか?フォームに.successまたは.completeコールバックを追加する方法はありますか?


なぜAjaxを使用しないのですか?jQuery Ajax関数を使用すると、そのようなコールバックを定義できます。
davidbuzatto 2012

12
davidbuzatto、ajaxが使えない場合があります。たとえば、ファイルをアップロードする場合などです。
Pere

3
@Pere将来ここでは真実ではありません。
SparK 2016年

回答:


119

私はこれをやった-

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

そして、物事は完璧に機能しました。

詳細については、このAPIドキュメントを参照してください。


3
うわー...私は何か新しいことを学びました。ええ、それの外観から、これは最も簡単な解決策です。おそらく、それは最高です。私は熱心なコーディングホラーリーダーです。そのブログで、Jeff Attwoodは、より少ないコードを記述する必要があることを強調しており、この方法はそれを実現します。良い発見。:)
Sal

7
そして、もし<form>通常提出されたら?(つまり、Ajaxではありません)最初の引数に何を入れればよい.bind()ですか?編集:まあ、私は推測しclickます。Nvm、ごめんなさい。:p
4wk_ 2013

9
注意してください:これは終了後のあなたの機能を発射しようとしているすべての(私は誤解だ場合を除き、あなたはこれを見つけた場所のためのリンクを提供するために、私は大好きです。その場合には)アヤックスイベントだけでなく、フォームの提出
DMAC駆逐艦

18
「jQuery 1.8以降では、.ajaxComplete()メソッドはドキュメントにのみ添付する必要があります」
Meredith

6
ボタンを使用して、通常のフォームを使用して私を形成しませんでしたが、ボタンはjavascript $( '#formFile')。submit();を呼び出します。
ダニエル

35

私は、最も優れた解決策を確実に機能させることはできませんでしたが、この機能は見つかりました。必要かどうかはわかりませんが、タグにaction属性またはmethod属性がないため、POSTが$ .ajax関数によって処理され、コールバックオプションが提供されます。

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>

1
+1。この答えの鍵は$(this).serialize()ラインです。これを使用jQuery.ajax()して、既存のフォームをバックグラウンドで送信し、サーバーからの応答をキャッチして、何かを実行できます。
ウォーレンヤング14

15
セミコロンのないjavascript ...世界が燃えるのを見たいだけの人もいます。あなたの解決策はうまく
いき

2
.serializePOSTされたリクエストにファイル入力が含まれていないことに注意してください。IE <9のような古いブラウザーをサポートしていない限り、代わりにHTML5 FormData(この質問を参照)を使用してください
brichins

を使用するための小道具$(this).serialize()、それは私の問題を解決しました!
gnclmorais 2016年

あなたがjsで参照するあなたのhtmlの「form_selector」は何ですか?
ケビンメレディス2016

23

サーバーへのAJAX呼び出しを使用して、手動で処理を行う必要があります。これには、フォームもオーバーライドする必要があります。

しかし、心配しないでください。それは簡単なものです。フォームの操作方法の概要は次のとおりです。

  • デフォルトの送信アクションをオーバーライドします(preventDefaultメソッドを持つ、渡されたイベントオブジェクトのおかげです)。
  • フォームから必要なすべての値を取得します
  • HTTPリクエストを発射する
  • リクエストへの応答を処理する

まず、次のようにフォーム送信アクションをキャンセルする必要があります。

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

次に、データの値を取得します。テキストボックスが1つだけあるとしましょう。

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

そしてリクエストを発射します。POSTリクエストであると仮定しましょう。

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

そして、これはほぼそれを行う必要があります。

注2:フォームのデータを解析するには、プラグインを使用することをお勧めします。それはあなたの人生を本当に簡単にするだけでなく、実際のフォーム送信アクションを模倣する素晴らしいセマンティクスを提供します。

注2: deferを使用する必要はありません。それは単なる個人的な好みです。同様に次のことを行うことができ、それも機能するはずです。

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

2
素晴らしいサンプル。ファイルのアップロード(マルチパート/フォームデータ)で同じことをするにはどうすればよいですか?
Adam W

11

MVCの場合、これはさらに簡単なアプローチでした。Ajaxフォームを使用してAjaxOptionsを設定する必要があります

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

これは送信コードです。これはドキュメント準備セクションにあり、ボタンのonclickイベントを関連付けてフォームを送信します

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

これはAjaxOptionsで参照されるコールバックです

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

MVCのコントローラーメソッドでは、次のようになります。

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}

2
それらのコードは.Netコードであり、質問ではそれを指定していません。
MrMins、2014年

13
これは実際にこれを反対する正当な理由ではありません。答えは機能し、同じ問題に直面している.NET開発者を助けるかもしれません。
edepperson 2014年

私はこのアイデアが好きですが、何らかの理由でコールバックが起動しません。コントローラメソッドはJsonResultを返す必要がありますか?私のコントローラーメソッドは現在ActionResultを返します。
mattpm

7

あなたが説明したようなコールバック関数があるとは思いません。

ここで正常なのは、PHPなどのサーバー側の言語を使用して変更を行うことです。

PHPでは、たとえば、フォームから非表示フィールドをフェッチし、存在する場合はいくつかの変更を行うことができます。

PHP:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Jqueryでそれを行う1つの方法は、Ajaxを使用することです。送信をリッスンし、falseを返してデフォルトの動作をキャンセルし、代わりにjQuery.post()を使用できます。jQuery.postには成功コールバックがあります。

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/


0

フォームが送信される前に、フォームの「送信時」ハンドラが呼び出されます。フォームが送信された後に呼び出されるハンドラーがあるかどうかわかりません。従来の非Javascriptの意味では、フォーム送信はページをリロードします。


フォームの送信がファイルのダウンロードにリダイレクトされない限り、ページはそのまま残ります。Ajaxリクエストではファイルのダウンロードを開始できないため(アンカータグゲームなしで)、JavaScript送信を使用できませんが、ユーザーに待機するように指示したり、ファイルを
取得

-1
$("#formid").ajaxForm({ success: function(){ //to do after submit } });

3
ajaxForm()、インストールされているサードパーティ製のコンポーネント?jQueryの標準部分ではありません。
ウォーレンヤング
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.