Pada artikel ini, kita akan belajar cara mengirimkan formulir atau bagian dari formulir tanpa penyegaran halaman menggunakan JQuery, & akan memahami penerapannya melalui contoh
Bagaimana cara mencegah formulir HTML untuk dikirim?
Umumnya, ketika kita mengirimkan formulir maka kita harus mengklik tombol kirim kemudian halaman kita akan menavigasi ke rute lain seperti yang disebutkan dalam atribut tindakan formulir tetapi kita dapat melakukannya di latar belakang halaman web tanpa menavigasi halaman web ke rute lain. Dan ini dimungkinkan dengan menggunakan acara tersebut. preventDefault() metode yang memblokir acara default dan tidak mengizinkannya untuk memicu. Saat kita mengklik tombol submit maka sebuah event akan terpicu, jadi kita perlu mencegah event ini karena event ini bertanggung jawab untuk membawa pengguna ke route lain. Jadi, kita harus melampirkan pendengar acara onsubmit ke formulir itu, sehingga ketika pengguna mengklik tombol kirim, kita bisa mendapatkan objek acara itu dan mencegah acara khusus itu diaktifkan, dengan menggunakan metode preventDefault. Setelah mencegah acara menggunakan acara. metode preventDefault() maka kita perlu mendapatkan nilai formulir dan membuat permintaan posting ke rute tertentu di mana kita ingin memposting nilai kita
Prasyarat. Pemahaman dasar tentang HTML, CSS, Javascript, dan JQuery diperlukan sebelum kita melanjutkan
Mendekati
- Buat file HTML dan tambahkan jquery library CDN di atas kode javascript
- Buat 2 kolom input, tombol kirim, dan rentang untuk menampilkan hasilnya
- Tambahkan pendengar onsubmit ke formulir dan lakukan panggilan balik dengan satu parameter tunggal
Contoh. Dalam contoh ini, kami telah mengambil permintaan posting palsu di mana kami perlu memposting beberapa informasi dan server akan mengembalikan id sebagai objek
HTML
<!DOCTYPE html>
<html>
_
<head>
<________1<!DOCTYPE html>_3_______
<3
<_4<5
<_4<7
<_4<9
<_4html1
html_3
html_4
html_6
<_4html8
html_3
html_4
>3
<4>5
html_3
html_4
0
2
<_4 4
html_3
8<0>
8head>
_
<<6>
<________6<!DOCTYPE html>_3_______
<4<head4 head5head6head_6______7>
head_9>0
<4 8head4>
<4<>7>8>7>
8head0>
< _7>
<4<head0 head5head6head_6_______7>
head9<<8 ________1______9head6<14 <02________6______6<1_______04 <05________6______6_______1______10 _______8
Kemudian saya menggunakan jQuery AJAX di index. php untuk mengirim nilai formulir saya dalam permintaan asinkron GET atau POST untuk mendaftar. php dan biarkan menyimpan nilai dalam database dan mengirim email ke pengguna. Keindahan dari semua itu adalah Anda tidak harus menunjukkannya kepada saya. e. mengarahkan ulang ke register. php sama sekali, Anda dapat melakukan semua ini tanpa harus meninggalkan halaman index. halaman php. Javascript Anda juga dapat benar-benar mendapat manfaat dari jQuery. Jquery[^]
masalah dengan kode Anda tampaknya adalah fakta bahwa formulir dan skrip PHP Anda ada di halaman yang sama dan tidak ada pemeriksaan untuk postback ke diri sendiri. Dan dengan tidak adanya atribut "aksi" dalam tag formulir, standarnya adalah untuk mengirim kembali ke dirinya sendiri dan itulah mengapa ketika Anda menyegarkan, nilai yang sama akan diposting ulang
Semoga ini membantu
EDIT. Juga, gunakan Ekspresi Reguler untuk validasi input dan jangan tunda validasi hingga pengguna mengklik tombol kirim. Coba lakukan segera setelah kontrol kehilangan fokus (jquery akan mewujudkan kekuatannya di sini dan Anda akan menyukainya). )
Tambahkan solusi Anda di sini
B I U S small BIG code var & link [^] encode untab case indent outdent
Pratinjau 0
Anggota yang Ada
atau Bergabunglah dengan kami
Unduh, Pilih, Komentari, Publikasikan
Email muEmail ini sedang digunakan. Apakah Anda memerlukan kata sandi Anda?
Kata Sandi OpsionalMohon saat menjawab pertanyaan
- Baca pertanyaan dengan hati-hati
- Pahami bahwa bahasa Inggris bukanlah bahasa utama semua orang, jadi toleran terhadap ejaan dan tata bahasa yang buruk
- Jika pertanyaan diutarakan dengan buruk, mintalah klarifikasi, abaikan, atau edit pertanyaan dan perbaiki masalahnya. Penghinaan tidak diterima
- Jangan beritahu seseorang untuk membaca manual. Kemungkinan mereka memiliki dan tidak mendapatkannya. Berikan jawaban atau lanjutkan ke pertanyaan berikutnya
Konten ini, bersama dengan kode sumber dan file terkait, dilisensikan di bawah The Code Project Open License (CPOL)