masih dalam kategori form event pada jquery dan kali ini kita mencoba mengirim data tanpa refresh halaman atau mengklik tombol submit pada form tanpa refresh halaman yaitu dengan yang namanya event submit pada jquery. namun seperti biasa izinkan diri ini terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah diberikan Allah kepada diri ini secara gratis sehingga diri ini bisa menulis dan berbagi dalam tulisan ini. dan tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk junjungan baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada keluarga dan para sahabatnya.
Bismillahir rohmaanir rohiim, kali ini kita akan mencoba membuat sebuah proses mengirim data tanpa refresh halaman atau membuat sebuah tombol submit ketika di klik tidak merefresh suatu halaman dengan yang namanya jquery submit event atau event submit pada jquery. event submit jquery ini adalah suatu keadaan dimana ketika user mengklik tombol atau input type submit pada suatu form tidak akan terjadi proses refresh halaman html atau halaman websitenya dan kode jquery atau kode dari javascript atau kode dari php kita akan tetap tereksekusi. untuk penulisan jquery submit event atau event submit jquery ini kurang lebihnya adalah seperti berikut
$("selector").submit(function(){//kode actionnya disini});
dan untuk contoh kode lengkap fungsi event submit kurang lebihnya seperti berikut
$(document).ready(function(){
$("#frm").submit(function(){
alert("Ini tes fungsi submit atau penekanan tombol form pada jquery");
});
});
dan untuk kode lengkap dalam javascriptnya kurang lebihnya seperti berikut
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#frm").submit(function(){
alert("Ini tes fungsi submit atau penekanan tombol form pada jquery");
});
});
</script>
<form id="frm" name="frm" action="javascript:void(0);">
<input type="text" name="inpkey" id="inpkey">
<input type="submit" name="klik" id="klik">
</form>
dari kode diatas yang membuat halaman web tidak menrefresh ketika klik submit adalah kode berikut
action="javascript:void(0);"
di action nanti juga bisa kita ubah dengan tanda "#", dan untuk kode diatas akan menghasilkan output pesan "Ini tes fungsi submit atau penekanan tombol form pada jquery" sepeti tampak pada gambar berikut
<script src="jquery.min.js"></script><script>$(document).ready(function(){$("#frm").submit(function(){if(document.getElementById("inpkey").value=="aku"){$("#tampil").html("<h1>Cinta Kamu</h1>");}else if(document.getElementById("inpkey").value=="kamu"){$("#tampil").html("<h1>Cinta Aku</h1>");}else{$("#tampil").html("<h1>Cinta Rosul</h1>");}});});</script><form id="frm" name="frm" action="javascript:void(0);"><input type="text" name="inpkey" id="inpkey"><input type="submit" name="klik" id="klik"></form><div id="tampil"></div>
kode diatas saya gabungkan dengan memakai pengkondisian if else dan else if sehingga biar tidak jenuh untuk outputnya. dan jika kode diatas dijalankan ketika mengklik tombol submit maka ada 3 opsi output dari kode diatas dan salah satu output jika ketika kita isi input text dengan kata aku maka output kode diatas akan megnhasilkan output "Cinta Kamu" seperti tampak pada gambar berikut.
Komentar
Posting Komentar