Kirimkan metode posting formulir menggunakan javascript

• Yang pertama adalah "tindakan" yang berisi URL (yang menangani pengiriman proses formulir)
• Atribut kedua adalah "metode" yang memiliki metode HTTP

Metode HTTP dapat dari berbagai jenis dan dua yang paling umum digunakan adalah

• GET (digunakan untuk mendapatkan beberapa data dari server)
• POST (digunakan untuk menulis data ke server)

Namun, kami tidak akan menggunakan kedua atribut ini di postingan ini karena kami tidak bekerja dengan server

Mari kita menulis kode HTML untuk pembuatan form

<. DOCTYPE html>

< html lang="en">

< kepala >

< judul > Kirim Formulir Menggunakan JavaScript << /title>

< /kepala >

< tubuh >

< formulir id="myForm">

<. -- Bidang Masukan -->

< masukan ketik="teks" name="username" id="username" placeholder="Enter your Username">

< masukkan ketik="sandi" name="password" id="password" placeholder="Enter your Password">

<. -- jika tombol di bawah diklik, formulir akan dikirimkan -->

< button ketik="kirim">Submit</button>

< /bentuk >

< skrip src="kode. js" >< /skrip >

< /tubuh >

< /html >

Pada kode di atas, kita membuat form dan memberikan atribut id ke form yang signifikansinya akan kita lihat sebentar lagi. Selanjutnya, kita mendefinisikan dua field input dan kemudian mendefinisikan sebuah tombol yang memiliki tipe submit. Pada akhirnya, kami menempatkan tag skrip dan mereferensikan nama file “code. js” yang akan berisi kode JavaScript kita

Akses Formulir dan ambil Nilai dari formulir

Sekarang setelah kita selesai membuat formulir, mari kita akses formulir ini dari JavaScript dan kemudian mengambil nilai nama pengguna dan kata sandi yang ada di dalam tag formulir. Untuk mengakses form kita akan menggunakan atribut id yang disebutkan sebelumnya melalui kode berikut

var myForm = . getElementById('myForm');

Dengan cara yang sama, kita juga bisa mendapatkan nilai dari input field menggunakan atribut id yang diberikan dalam form HTML. Satu-satunya perbedaan adalah kami akan memberikan nilai di akhir getElementById sehingga kami dapat mengambil nilai dari kolom input dan bukan dari elemen itu sendiri

var nama pengguna = dokumen. getElementById('nama pengguna').nilai;

var password = dokumen. getElementById('password').nilai;

Kirim Formulir dan Validasi Data

Untuk mengirimkan formulir, kami akan menggunakan pendengar acara yang mendengarkan pendengar tertentu secara terus menerus. Suatu peristiwa hanyalah interaksi HTML dan JavaScript yang dipicu oleh pengguna atau browser saat pengguna memanipulasi halaman dan peristiwa ini ditangani oleh pendengar acara

var myForm = . getElementById('myForm');
// Pendengar acara yang mendengarkan acara kirim
formulirsaya. addEventListener("kirim" , function (e){
    e. preventDefault();
// mengambil nilai
var nama pengguna = dokumen. getElementById('nama pengguna').nilai;
var password = dokumen. getElementById('password').nilai;

// memvalidasi bidang nama pengguna dan kata sandi
jika( nama pengguna =='' || kata sandi ==''){
        alert ("Harap Isi semua bidang yang wajib diisi");
    }
else{
        alert ("Pengiriman formulir berhasil");
    }
})

Pada kode di atas, pertama-tama, kita mendapatkan referensi formulir menggunakan atribut id dan kemudian menginisiasi event listener "kirim" pada formulir ini. Fungsi yang ditentukan dalam pendengar acara akan dipanggil setelah pengguna mengklik tombol kirim

Di dalam fungsi tersebut, kita telah melakukan validasi, yaitu jika kolom input username atau password kosong maka kita akan melihat pesan di kotak peringatan yang bertuliskan Please Fill all required field jika tidak kita akan mendapatkan pesan Pengiriman formulir berhasil

Mari kita periksa dulu dengan mengklik tombol kirim biarkan dua kolom input kosong

Sekarang mari kita isi dua kolom dan lihat hasilnya

Kesimpulan

Forms are very helpful in gathering data from users and then manipulating or playing with that data in JavaScript. In this post, we took help from an HTML tag to initialize a form and then went on to define two input fields and a button. Next, we accessed the form element inside a javascript file and then retrieved the values of form input fields using the id attribute.

Pada akhirnya, kami menjawab pertanyaan tentang cara mengirimkan formulir menggunakan JavaScript dengan memulai pendengar acara yang akan mendengarkan acara kirim, dan setiap kali pengguna mengklik tombol kirim, acara ini akan diaktifkan. Kami juga memvalidasi kolom input kami di dalam fungsi event listener

Bagaimana cara mengirimkan formulir menggunakan metode posting?

Bagaimana cara mengirimkan permintaan POST dari JavaScript?

Bisakah saya menggunakan JavaScript untuk mengirimkan formulir?

Bagaimana cara menggunakan metode posting dalam JavaScript?