Dalam catatan kali ini saya mendapatkan ilmu dari berbagai sumber tentang cara menampilkan hasil form html dan javascript. Ilustrasinya sebagai berikut: Misalkan ada tombol SUBMIT atau secara umum berupa sebuah button. Ketika button tersebut diklik maka akan menampilkan info tentang pilihan yang ada dalam form tersebut. Coba perhatikan sampel di bawah ini. Coba pilih sesuai pilihan posisi, nanti akan ditampilkan tugas dari posisi pemain sepak bola tersebut.
Untuk lebih jelasnya coba dijalankan script dibawah ini. Bagaimana perpaduan html dan javascript pada form tersebut. Untuk membuat tampilan seperti itu bisa digunakan script di bawah ini.
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>FORM HTML dengan JAVASCRIPT</title>
<script>
function hasil(){
var posisi=document.getElementById("masukin").select1.value;
var tugas=document.getElementById("container");
if (posisi=="striker")
{
tugas.innerHTML="Mencetak Gol dan Sebagai ujung Tombak Penyerangan";
}
else if (posisi=="gelandang")
{
tugas.innerHTML="Mengatur Serangan dan Menyalurkan Bola ke Striker";
}
else if (posisi=="bek")
{
tugas.innerHTML="Menjaga Daerah Pertahanan Dari Serangan Lawan";
}
else if (posisi=="kiper")
{
tugas.innerHTML="Menjaga Gawang dari Kebobolan"; }
}
</script>
</head>
<body>
<h3>Menampilkan Hasil Form HTML dengan JavaScript</h3>
<form id="masukin" name="masukin" onsubmit="return false">
<label for="select1">Pilih Posisi Dalam Sepak Bola: </label>
<select id="select1" name="select1">
<option value="kiper">KIPER</option>
<option value="bek">BEK</option>
<option value="gelandang">GELANDANG</option>
<option value="striker">STRIKER</option>
</select>
<input type="submit" value="CEK TUGAS" onclick="hasil()">
</form>
<p id="container"></p>
</body>
</html>
Penjelasan mengenai script di atas akan dibagi menjadi dua bagian. Pertama akan dilihat dari HTML dan kedua akan dilihat dari sisi javascript.
Pilihan pilihan dalam form (Striker, Bek, Gelandang dan Kiper) dibuat dengan cara tag <option value >. Ini terletak dibawah objek form dengan atribut id select. Masing masing Value dimasukkan dengan posisi (pilihan yang akan ditampilkan).
Jika diperhatikan setelah onsubmit=”return false” fungsi ini adalah berupa perintah bahwa ketika di submit maka halaman tetap berada di sana. Hasil tidak ditampilkan pada halaman baru. Sebenarnya fungsi return false disini dimatikan. Karena disini data diolah dan ditampilkan dengan javascript. Ini diaktifkan ketika digunakan dalam pemograman PHP.
Setelah submit dimatikan, kemudian diaktikan tautan ke javascript dengan perintah “onclick=”hasil()” artinya, dengan klik data akan diproses oleh fungsi hasil pada javascript. Setelah diproses data oleh jvascript, maka hasilnya akan dipanggil kembali untuk ditampilkan di HTML. Pemanggilan tersebut dengan memanggil “ id =container”
Variabel posisi dibuat berupa perintah untuk mengambil dari data dari form dengan id “masukin” tadi. Setelah itu ada variabel posisi yang ingin ditampilkan sebagai hasil.
Berikutnya digunakan fungsi IF. Yang akan mencari kondisi sesuai input dari variabel posisi tadi. Akibat dari IF tersebut ditulis berupa tampilan variabel tugas. Masing masing tugas ditulis dalam Akibat IF tadi . Bisa anda lihat pada kalimat. “tugas.innerHTML="Mencetak Gol dan Sebagai ujung Tombak Penyerangan";
Menampilkan Hasil Form HTML dengan JavaScript
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>FORM HTML dengan JAVASCRIPT</title>
<script>
function hasil(){
var posisi=document.getElementById("masukin").select1.value;
var tugas=document.getElementById("container");
if (posisi=="striker")
{
tugas.innerHTML="Mencetak Gol dan Sebagai ujung Tombak Penyerangan";
}
else if (posisi=="gelandang")
{
tugas.innerHTML="Mengatur Serangan dan Menyalurkan Bola ke Striker";
}
else if (posisi=="bek")
{
tugas.innerHTML="Menjaga Daerah Pertahanan Dari Serangan Lawan";
}
else if (posisi=="kiper")
{
tugas.innerHTML="Menjaga Gawang dari Kebobolan"; }
}
</script>
</head>
<body>
<h3>Menampilkan Hasil Form HTML dengan JavaScript</h3>
<form id="masukin" name="masukin" onsubmit="return false">
<label for="select1">Pilih Posisi Dalam Sepak Bola: </label>
<select id="select1" name="select1">
<option value="kiper">KIPER</option>
<option value="bek">BEK</option>
<option value="gelandang">GELANDANG</option>
<option value="striker">STRIKER</option>
</select>
<input type="submit" value="CEK TUGAS" onclick="hasil()">
</form>
<p id="container"></p>
</body>
</html>
 |
| Script dijalankan pada Browser |
Penggunaan HTML
Form dibuat dengan atribut id=”masukin″ dan nama=”masukin″. Form tersebut mempunya 1 objek form yaitu dengan select dan dilengkapi dengan submit sebagai bentuk cara perintah agar meproses data yang telah diinput (berupa pilihan posisi). Fungsi tombol tersebut pertama adalah untuk mengirimkan perintah pada javascript untuk mengolah data. Untuk membuat form dibahas pada post khusus, silahkan lihat navigasi petunjuk belajar bagian HTML. Cari cara membuat form HTML.Pilihan pilihan dalam form (Striker, Bek, Gelandang dan Kiper) dibuat dengan cara tag <option value >. Ini terletak dibawah objek form dengan atribut id select. Masing masing Value dimasukkan dengan posisi (pilihan yang akan ditampilkan).
Jika diperhatikan setelah onsubmit=”return false” fungsi ini adalah berupa perintah bahwa ketika di submit maka halaman tetap berada di sana. Hasil tidak ditampilkan pada halaman baru. Sebenarnya fungsi return false disini dimatikan. Karena disini data diolah dan ditampilkan dengan javascript. Ini diaktifkan ketika digunakan dalam pemograman PHP.
Setelah submit dimatikan, kemudian diaktikan tautan ke javascript dengan perintah “onclick=”hasil()” artinya, dengan klik data akan diproses oleh fungsi hasil pada javascript. Setelah diproses data oleh jvascript, maka hasilnya akan dipanggil kembali untuk ditampilkan di HTML. Pemanggilan tersebut dengan memanggil “ id =container”
Pengunaan JavaScript
Kode Javascript adalah keseluruhan kode yang diwarnai biru. Kode javascript dimulai dengan pembuatan fungsi hasil(). Ini akan dijalankan ketika dilakukan klik pada tombol submit dalam html tadi. Dalam fungsi hasil() terdapat variabel posisi dan variabel tugas.Variabel posisi dibuat berupa perintah untuk mengambil dari data dari form dengan id “masukin” tadi. Setelah itu ada variabel posisi yang ingin ditampilkan sebagai hasil.
Berikutnya digunakan fungsi IF. Yang akan mencari kondisi sesuai input dari variabel posisi tadi. Akibat dari IF tersebut ditulis berupa tampilan variabel tugas. Masing masing tugas ditulis dalam Akibat IF tadi . Bisa anda lihat pada kalimat. “tugas.innerHTML="Mencetak Gol dan Sebagai ujung Tombak Penyerangan";
Apabila ditemukan posisi, maka diproses oleh logika IF dan dicari akibat yang tepat. Kemudian direferensikan ke variabel tugas. Variabel tugas inilah yang dipanggil kembali hingga tampil di html.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment