Bagaimana cara melakukan Callback Jquery setelah pengiriman formulir?

Saya memiliki bentuk sederhana dengan remote = true.

Formulir ini sebenarnya ada di Dialog HTML, yang ditutup segera setelah tombol Kirim diklik.

Sekarang saya perlu membuat beberapa perubahan pada halaman HTML utama setelah formulir berhasil dikirim.

Saya mencoba ini menggunakan jQuery. Tapi ini tidak memastikan bahwa tugas dilakukan setelah beberapa bentuk respons dari pengiriman formulir.

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

// do the task here ..

});

Bagaimana cara memasang callback, sehingga kode saya dijalankan hanya setelah formulir berhasil dikirim? Apakah ada cara untuk menambahkan beberapa panggilan balik .success atau .complete ke formulir?

Saya baru saja melakukan ini -

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

         // tasks to do 


   });

Dan semuanya bekerja dengan sempurna.

Lihat dokumentasi api ini untuk detail yang lebih spesifik.

Saya tidak bisa mendapatkan solusi upvoted nomor satu untuk bekerja dengan andal, tetapi telah menemukan ini berfungsi. Tidak yakin apakah itu diperlukan atau tidak, tetapi saya tidak memiliki atribut tindakan atau metode pada tag, yang memastikan POST ditangani oleh fungsi $ .ajax dan memberi Anda opsi panggilan balik.

<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>

Anda harus melakukan sesuatu secara manual dengan panggilan AJAX ke server. Ini akan meminta Anda untuk mengganti formulir juga.

Tapi jangan khawatir, ini sangat mudah. Berikut ikhtisar tentang bagaimana Anda akan bekerja dengan formulir Anda:

• ganti tindakan pengiriman default (berkat objek acara yang diteruskan, yang memiliki preventDefaultmetode)
• ambil semua nilai yang diperlukan dari formulir
• jalankan permintaan HTTP
• menangani tanggapan atas permintaan tersebut

Pertama, Anda harus membatalkan tindakan pengiriman formulir seperti ini:

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

Dan kemudian, ambil nilai datanya. Anggap saja Anda memiliki satu kotak teks.

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

Dan kemudian berikan permintaan. Anggap saja itu permintaan 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.
    });
});

Dan ini harus melakukannya.

Catatan 2: Untuk mengurai data formulir, sebaiknya Anda menggunakan plugin . Ini akan membuat hidup Anda sangat mudah, serta memberikan semantik bagus yang meniru tindakan pengiriman formulir yang sebenarnya.

Catatan 2: Anda tidak harus menggunakan penunda. Itu hanya preferensi pribadi. Anda sama-sama dapat melakukan hal berikut, dan ini juga akan berhasil.

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

Untuk MVC di sini adalah pendekatan yang lebih mudah. Anda perlu menggunakan formulir Ajax dan mengatur AjaxOptions

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

di sini adalah kode pengiriman, ini ada di bagian siap dokumen dan mengikat acara onclick tombol untuk mengirimkan formulir

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

di sini adalah callback yang direferensikan di AjaxOptions

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

dalam metode pengontrol untuk MVC terlihat seperti ini

[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");
    }
}

Saya tidak percaya ada fungsi panggilan balik seperti yang Anda gambarkan.

Yang normal di sini adalah melakukan perubahan menggunakan beberapa bahasa sisi server, seperti PHP.

Di PHP, Anda bisa misalnya mengambil bidang tersembunyi dari formulir Anda dan melakukan beberapa perubahan jika ada.

PHP:

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

Salah satu cara untuk melakukannya di Jquery adalah dengan menggunakan Ajax. Anda bisa mendengarkan submit, return false untuk membatalkan perilaku defaultnya dan sebagai gantinya menggunakan jQuery.post (). jQuery.post memiliki sukses-panggilan balik.

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

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

Penangan formulir "saat dikirim" dipanggil sebelum formulir dikirimkan. Saya tidak tahu apakah ada penangan yang akan dipanggil setelah formulir dikirimkan. Dalam pengertian tradisional non-Javascript, pengiriman formulir akan memuat ulang halaman.

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