Bagaimana cara melakukan Callback Jquery setelah pengiriman formulir?


119

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?


Mengapa Anda tidak menggunakan Ajax? Dengan fungsi jQuery Ajax Anda dapat menentukan callback tersebut.
davidbuzatto

12
davidbuzatto, ada beberapa kasus di mana Anda tidak dapat menggunakan ajax. Misalnya, saat Anda ingin mengupload file.
Pere

3
@Pere Tidak benar di sini di masa depan.
SparK

Jawaban:


119

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.


3
Wow ... Saya baru saja belajar sesuatu yang baru. Ya, dari kelihatannya, ini adalah solusi paling sederhana. Mungkin, itu yang terbaik. Saya adalah pembaca Coding Horror yang rajin, dan di blog itu, Jeff Attwood menekankan bahwa kita harus menulis lebih sedikit kode, dan metode ini mencapai itu. Temuan bagus. :)
Sal

7
Dan apakah <form>biasanya yang dikirimkan? (Maksud saya tidak dengan Ajax) Apa yang bisa saya masukkan dalam argumen pertama .bind()? EDIT: yah, saya kira click. Nvm, maaf. : p
4wk_

9
waspadalah: ini akan mengaktifkan fungsi Anda setelah menyelesaikan salah satu acara ajax, bukan hanya pengiriman formulir Anda (kecuali saya salah, dalam hal ini saya akan senang untuk Anda untuk memberikan link untuk di mana Anda menemukan ini)
DMAC Sang Penghancur

18
"Mulai jQuery 1.8, metode .ajaxComplete () hanya boleh dilampirkan ke dokumen"
Meredith

6
Tidak berfungsi dari saya, menggunakan Formulir normal, dengan tombol, tetapi tombol memanggil javascript $ ('# formFile'). Submit ();
Daniel

35

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>

1
+1. Kunci dari jawaban ini adalah $(this).serialize()garis. Ini memungkinkan Anda menggunakan jQuery.ajax()untuk mengirimkan formulir yang ada di latar belakang, lalu menangkap balasan dari server dan melakukan sesuatu dengannya.
Warren Young

15
javascript tanpa titik koma ... beberapa orang hanya ingin melihat dunia terbakar. Solusi Anda berfungsi, jadi terima kasih :)
viggity

2
Perhatikan bahwa .serializetidak termasuk input file dalam permintaan POST Anda. Gunakan HTML5 FormData (lihat pertanyaan ini ) sebagai gantinya kecuali Anda mendukung browser lama seperti IE <9
brichins

Alat peraga untuk digunakan $(this).serialize(), itu memecahkan masalah saya!
gnclmorais

apa itu 'form_selector' di html yang Anda rujuk di js?
Kevin Meredith

23

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.
});

2
Sampel yang bagus. Bagaimana melakukan hal yang sama dengan unggahan file (multi-part / form-data) ???
Adam W

11

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

2
Kode tersebut adalah kode .Net, dan dalam pertanyaan tidak pernah menentukannya.
MrMins

13
Itu sebenarnya bukan alasan yang baik untuk tidak memilih ini. Jawabannya berfungsi dan mungkin membantu pengembang .NET yang menghadapi masalah yang sama.
edepperson

Saya suka ide ini, tetapi untuk beberapa alasan callback tidak aktif. Apakah metode pengontrol harus mengembalikan JsonResult? Metode pengontrol saya saat ini mengembalikan ActionResult.
mattpm

7

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/


0

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.


Kecuali jika pengiriman formulir dialihkan ke unduhan file, dalam hal ini halaman dibiarkan utuh. Saya tidak dapat menggunakan pengiriman JavaScript karena permintaan Ajax tidak dapat memulai pengunduhan file (tanpa permainan tag jangkar), tetapi saya juga tidak dapat memberi tahu pengguna untuk menunggu, atau membersihkan setelah mereka memiliki file ...
kitsu .eb

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

3
Apakah ajaxForm()komponen pihak ketiga telah Anda instal? Ini bukan bagian standar jQuery.
Warren Young
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.