web-dev-qa-db-ja.com

フォーム送信後にJquery Callbackを実行する方法

Remote = trueの単純な形式があります。

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

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

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

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

// do the task here ..

});

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

javascriptjqueryhtmlasp.netwebforms
111
geeky_monster

私はちょうどこれをしました - 

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

         // tasks to do 


   });

そして物事は完璧に働いた。

より具体的な詳細については このapiドキュメント を参照してください。

109
geeky_monster

私は信頼できるように動くためにナンバーワンの支持された解決策を手に入れることができませんでしたが、これがうまくいくことがわかりました。必須かどうかはわかりませんが、POSTが$ .ajax関数によって処理され、コールバックオプションが提供されるように、タグにはactionまたはmethod属性がありません。

<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>
29
Bradley Bossard

サーバーへの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：フォームのデータを解析するには、 プラグイン を使用することをお勧めします。それはあなたの人生を本当に簡単にするだけでなく、実際のフォームがアクションを送信するのを模したNiceの意味を提供するでしょう。

注2：あなたは遅延を使用する必要はありません。それは個人的な好みです。あなたは等しく以下をすることができます、そして、それはまたうまくいくべきです。

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

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

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

これが送信コードです。これはdocument readyセクションにあり、ボタンの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");
    }
}
8
edepperson

私はあなたが説明するもののようなコールバック関数があるとは思わない。

ここで普通のことは、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/

7
Sindre

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

1
eel ghEEz
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
0
Aikanáro