03 Oktober 2020

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

www.niguru.com
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)

Tidak ada komentar:

Posting Komentar