Memanfaatkan Reset Button Untuk Menghapus Nilai Pada Kolom Input Pada Form HTML

Niguru.com | Sabtu, 3 Okt 2020 | Pada posting sehari sebelumnya Niguru.com sudah menjelaskan tentang cara mudah untuk mengirimkan data dari area HTML ke area Javascript dengan metode this.form dan obj.

Kali ini Niguru.com akan menjelaskan cara untuk menambahkan sebuah tombol reset pada area form pada HTML. Pada contoh script yang dijelaskan kemarin, user harus menghapus manual setiap konten pada kolom input yang akan diisi dengan data baru.

Berikut ini script untuk membuat tombol reset:

<input type="reset" value="nama_tombol">

Berikut ini contoh program yang sudah dijelaskan pada posting kemarin, yang belum dilengkapi tombol reset:

 

Tampilan pada browser, dan dengan contoh dimana kolom sudah diisi oleh user:

 

Berikut ini penulisan program yang sudah dilengkapi dengan fasilitas tombol reset:

<h1>Baca nilai/value input HTML</h1>

<form>

<input type="text" id="a1"><br>

<input type="text" id="a2"><br>

<input type="text" id="a3"><br>

<input type="button" value="Kirim Data" onclick="pilih(this.form)">

<input type="reset" value="Hapus"></form>

<script>

function pilih(obj){

var a=obj.a1.value

var b=obj.a2.value

var c=obj.a3.value

document.write("<h1>")

 

document.write("<br>ID a1: ",a)

document.write("<br>ID a2: ",b)

document.write("<br>ID a3: ",c)}

</script>

 

Hasilnya bila dilihat pada browser:

 

Sekarang untuk menghapus kolom-kolom yang sudah diisi dengan nilai seperti pada contoh di bawah ini, cukup dengan klik tombol Hapus:

Demikianlah penjelasan mengenai cara memanfaatkan tombol reset pada HTML.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)