Apa itu Objek FormData di JavaScript?

Objek FormData digunakan untuk menangkap formulir saat mengirimkan formulir dengan mengambilnya dengan metode lain. Untuk menambahkan bidang dengan metode, kita dapat membuat formulir HTML FormData baru atau terbaru atau membuat objek tanpa menggunakan formulir apa pun. Data dalam bidang teks harus disediakan saat tombol kirim diklik, dan JavaScript harus mengidentifikasinya dan memberikan nilai variabel tersebut.

Tulisan ini akan mendemonstrasikan Objek FormData dalam JavaScript dengan bantuan contoh termudah.

Apa itu Objek FormData di JavaScript?

Objek FormData adalah pendekatan populer untuk membangun kumpulan data dalam JavaScript yang dapat dikirim ke server menggunakan ' XMLHttpRequest ” atau diambil. Itu melakukan fungsi yang sama dengan elemen formulir HTML. Hal ini dapat dibandingkan dengan array dari array. Array terpisah mewakili setiap elemen yang ingin kami kirimkan ke server.

Sintaksis

Untuk menggunakan objek FormData di JavaScript, gunakan sintaks berikut:

const formData = baru FormData ( ) ;

Contoh 1: Buat Objek FormData Tanpa Formulir HTML

Pertama-tama, inisialisasi sebuah konstanta dengan nama tertentu dan tetapkan nilai tertentu untuk konstanta tersebut. Di sini, “ FormData baru() ” digunakan sebagai nilai konstan:

Konst formData = baru FormData ( ) ;

Selanjutnya, tambahkan data dengan meneruskan argumen di kolom “ menambahkan() ' metode

formData. menambahkan ( 'Nama' , 'Petugas' ) ;

formData. menambahkan ( 'Nama' , 'Javed' ) ;

formData. menambahkan ( 'usia' , 25 ) ;

Setelah itu, gunakan “ konsol.log() ' metode:

menghibur. catatan ( 'Formulir Informasi' ) ;

Menggunakan ' untuk ” untuk mengulang dan menampilkan output di konsol dengan bantuan tombol “ konsol.log() ' metode:

untuk ( biarkan obj dari formData ) {

menghibur. catatan ( obj ) ;

}

Contoh 2: Buat Objek FormData Dengan Formulir HTML

Untuk menambahkan FormData dengan form HTML, terlebih dahulu buat form di HTML dengan bantuan tombol “ ” elemen dan tambahkan atribut berikut yang tercantum di bawah ini:

Untuk menambahkan bidang input dalam formulir, gunakan tombol “ ” elemen.
Di dalam tag masukan, tentukan “ jenis ” atribut untuk menentukan tipe data elemen. Ada beberapa kemungkinan nilai untuk atribut ini, termasuk “ teks ”, “ nomor ”, “ tanggal ”, “ kata sandi ', dan masih banyak lagi.
“ placeholder ” digunakan untuk menambahkan nilai yang akan ditampilkan pada bidang masukan, dan “nama” mengacu pada nama bidang masukan.
“ onclick ” acara dipicu ketika pengguna melakukan fungsi dengan mengklik mouse:

< formulir id = 'membentuk' >

< tipe masukan = 'teks' nama = 'Nama' placeholder = 'Masukkan Nama Depan Anda' > 

< tipe masukan = 'teks' nama = 'Nama' placeholder = 'Masukkan Nama Belakang Anda' > 

< tipe masukan = 'tanggal' nama = 'usia' placeholder = 'Masukkan Umur anda' > 

< tipe masukan = 'tombol' nilai = 'Memasuki' onclick = 'data()' >

membentuk >

Selanjutnya, akses formulir di CSS dan atur ruang di sekitar formulir:

. membentuk {

batas : 20px ;

lapisan : 30px ;

}

Selanjutnya, gunakan tag skrip dan tambahkan kode berikut:

functiondata ( ) {
adalah bentuk = dokumen. getElementById ( 'membentuk' ) ;
constformData = DataFormulirbaru ( membentuk ) ;
menghibur. catatan ( 'Formulir Data' ) ;
untuk ( biarkan obj dariformData ) {
menghibur. catatan ( obj ) ;
}
}

Dalam cuplikan kode di atas:

Panggil ' getElementById(“bentuk”) ” metode untuk mengakses form dengan memanfaatkan form id.
Sekarang, simpan elemen yang diakses ke dalam konstanta baru “ formData ”.
Menggunakan ' untuk ” untuk iterasi dan mencetak elemen di konsol.

Keluaran

Anda telah mempelajari tentang pembuatan objek FormData di JavaScript.

Kesimpulan

Objek FormData digunakan untuk membangun kumpulan data dalam JavaScript yang dapat dikirim ke server. Untuk membuat objek Formdata di JavaScript, dua metode didemonstrasikan. Yang pertama menggunakan JavaScript sederhana dan yang kedua melalui pembuatan formulir dalam HTML dan menghubungkannya dengan JavaScript. Posting ini menyatakan tentang objek FormData di JavaScript.

Apa itu Objek FormData di JavaScript?