Membuat Klonisasi Teks pada Form Input menggunakan Jquery

Hallo teman-teman, di kesempatan kali ini saya akan membahasa cara Merancang Klonisasi Teks di Form Input menggunakan Jquery. Sebelum seketika ke pembahasan kalian mesti mengetahui dulu mengenai klonisasi teks di form input.



Oke selaku contoh seperti ini : ketika saya mengisikan data domisili email dan Retype domisili email di sebuah situs terdapat pemberitahuan yang menanyakan apakah Tempat tinggal email sama dengan retype domisili email yang sahabat isi? Kalau tak sama akan error dan mesti mencocokan kembali domisili email dengan retype domisili email. Nah jadi klonisasi ialah mengikuti atau mencocokan data yang kita ketik diform input sebelumnya.



Oke kalau masih bingung seketika saja kita praktekan.



Pertama-tama-tama bikin file htmlnya lalu ketik script html dibawah ini :



<html> 
<head>
<title>Klonisasi text di form input</title>
</head>
<body>
<form>
<p>Tempat tinggal Email : <input type=text id=inputbox1></p>
<p>Retype Tempat tinggal Email : <input type=text id=inputbox2></p>
<input type=submit value=Proses>
</form>
</body>
</html>


Jikalau telah, lanjut ketik script javascript dibawah ini lalu diletakan script ini didalam tag head html yang tadi :



  <script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js></script> 
<script type=text/javascript>
$(document).ready(function() {
$(#inputbox1).keyup(function() {
var klonisasi = $(this).val();
$(#inputbox2).val(klonisasi);
});
});
</script>


Jikalau telah silahkan kalian jalankan/run dibrowser masing masing dan coba lihat hasilnya akan jadi seperti gambar dibawah ini :



pada



Oke kalau telah seperti gambar diatas berarti kalian telah berhasil Merancang Klonisasi Teks di Form Input menggunakan Jquery.



Demikianlah penjelasan singkat dari saya mengenai cara Merancang Klonisasi Teks di Form Input menggunakan Jquery. semoga dapat bermanfaat.



Demikianlah dan terimakasih hingga bertemu di pertemuan berikutnya.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS