Bagaimana melakukan sesuatu sebelum di kirim? [Tutup]


146

Saya memiliki formulir yang memiliki tombol yang mengirimkan formulir. Saya perlu melakukan sesuatu sebelum pengiriman terjadi. Saya mencoba melakukan onClick pada tombol itu tetapi itu terjadi setelah pengiriman.

Saya tidak dapat membagikan kode tetapi, secara umum, apa yang harus saya lakukan di jQuery atau JS untuk menangani ini?



2
@Brad Christie kalau saja saya bisa menerima komentar sebagai jawaban. Terima kasih sangat membantu.
Jimmy

3
Saya benci jika stackover menutup pertanyaan. Anda dapat menangani tindakan Anda menggunakan peristiwa berikut yang diaktifkan pada waktu berikut tepat sebelum mengirimkan formulir: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit
Shadi Namrouti

1
Saya menghargai pertanyaan ini karena saya mengalami masalah yang sama baru-baru ini dan pertanyaan ini persis seperti yang ingin saya tanyakan.
buang909

2
lucu bahwa pertanyaan ini ditutup karena ini bukan pertanyaan yang sebenarnya: -?
Anna Klein

Jawaban:


213

Jika Anda memiliki formulir seperti ini:

<form id="myform">
...
</form>

Anda dapat menggunakan kode jQuery berikut untuk melakukan sesuatu sebelum formulir dikirimkan:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

3
Saya mengalami masalah dalam menggunakan ini untuk loop yang harus diselesaikan sebelum mengirimkan. Ada saran?
Smilyan

Punya kode untuk dilihat? Tidak yakin saya mengerti masalahnya.
Dan Breen

3
Mengapa ini dibungkus dalam pemanggilan fungsi kosong? Bukankah seharusnya submitfungsi dapat mengikat langsung ke $('#form')tanpa fungsi kosong di sekitarnya? EDIT: dokumen menyarankan bahwa panggilan fungsi sekitarnya tidak diperlukan .
eykanal

@kanal Poin yang bagus. Saya melanjutkan dan mengedit jawabannya untuk menghapus pembungkus fungsi setelah mengonfirmasi bahwa itu berfungsi dengan baik dengan itu dihapus.
Jon Schneider

3
@eykanal Saya menggunakan pemanggilan fungsi "kosong", karena itu singkatan dari $(document).ready()fungsi jQuery , yang memastikan DOM selesai sebelum melampirkan submitacara. Jika JS Anda ada di bagian bawah halaman, itu tidak perlu, tetapi jika ada di <head>bagian maka Anda membutuhkannya. Lihat: stackoverflow.com/q/13062246/135108
Dan Breen

23

Dengan asumsi Anda memiliki formulir seperti ini:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Anda dapat melampirkan onsubmit-event dengan jQuery seperti ini:

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Jika Anda return falseformulir tidak akan dikirimkan setelah fungsi, jika Anda mengembalikan true atau tidak ada itu akan dikirim seperti biasa.

Lihat dokumentasi jQuery untuk info lebih lanjut.


11

Anda dapat menggunakan onclickuntuk menjalankan beberapa kode JavaScript atau jQuery sebelum mengirimkan formulir seperti ini:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

18
Tapi ini tidak berhasil, ketika formulir berisi misalnya bidang masukan pengguna menekan tombol kembali yang mengaktifkan acara kirim. Biasanya lebih baik melampirkan langsung ke acara kirim sehingga Anda dapat memastikannya dipanggil terlepas dari bagaimana pengguna mengaktifkan kiriman.
puncak

2
<input type = "submit" value = "Klik" onmouseover = "beforeSubmit ();" />
Ansyori

5

Pastikan tombol submit bukan bertipe "submit", jadikan sebagai tombol. Kemudian gunakan acara onclick untuk memicu beberapa javascript. Di sana Anda dapat melakukan apa pun yang Anda inginkan sebelum Anda benar-benar memposting data Anda.


4
Formulir dapat dikirimkan dengan berbagai cara, seperti menekan enter di bidang tertentu. Mengikat ke klik pada satu tombol yang mungkin tidak diklik, bukanlah ide yang bagus. Jawaban yang lain menunjukkan bagaimana Anda mengikat onsubmitdari bentuk , yang akan api tidak peduli seberapa formulir dikirimkan.
Jason
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.