24 April, 2011

objek input data dengan javascript (bag 1)

setelah sebelumnya saya posting tentang variabel JavaScript, pada kesempatan ini saya akan posting objek input data dengan javasript (bag 1).
ada beberapa objek yang dapat digunakan untuk menginput data, dan objek2 tersebut biasanya terdapat dalam suatu Form. objek2 tersebuat meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.
tapi dalam artikel ini saya akan bahas Objek Text, Objek Radio, dan Objek Checkbox. selebihnya nanti nyusul di artikel yang akan datang .hhehe
wokeh, tanpa basa-basi dan tanpa banyak kompromi kita langsung aja coba bahas.. cekidot

1. Objek Text
untuk menginputkan data, kita dapat menggunakan Komponen/Objek Text. contoh penggunannya dapat kita lihat pada contoh dibawah ini:

<html>
<head><title>Latihan Objek Text</title></head>
<body>
<script languange ="JavaScript">

  <!--
  function tekan(){
     var namastr = (document.fform.nama.value);
     var alamatstr = (document.fform.alamat.value);

     document.fform.onama.value = namastr;
     document.fform.oalamat.value = alamatstr;
  }
  //-->

  </script>

  <form name ="fform">
  <H1> Memasukkan Data Dengan Objek Teks</H1><hr>

  Nama Anda : <input type="text" size="11" name="nama">
  <br>
  Alamat : <input type="text" size="25" name="alamat">
  <br>
  <input type="button" value="kirim" onclick="tekan()">
  <input type="reset" value="ulang">
  <H3>Output</H3>

  Jadi Nama Anda adalah :<input type="text" size="11" name="onama">
  <br>
  Alamat Anda di :<input type="text" size="25" name="oalamat">
  </form>

</body>
</html>
tampilan:

2. Objek Radio
Objek Radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Objek Radio memiliki nilai True jika dipilih dan memiliki nilai False jika tidak dipilih.
berikut contohnya:
<html>

<head><title>Latihan Dengan Objek Radio</title></head>
<body>

<script languange ="JavaScript">
<!--
function radio_box(form){
var ket = "";

if (form.wanita.checked == true){
    ket = "Wanita";
  }else{
    ket = "Pria";
  } 
 
alert('Anda adalah seorang ' +ket);
}
//-->
</script>

<form>
<H1> Memasukkan Data Dengan Objek Radio</H1><hr>
<p><input type="radio" value="wanita" name="wanita">Wanita</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html
tampilan:

3. Objek Checkbox
menyimpan informasi tentang elemen form yang berupa kotak cek. penggunaannya sama seperti objek radio.
berikut contohnya:
<html>

<head><title>Latihan Dengan Objek Checkbox</title></head>
<body>

<script languange ="JavaScript">
<!--
function radio_box(form){
var ket = "";
var ket1 ="";
  if (form.bola.checked == true){
    ket = "Nonton Bola";
  }
  if (form.tv.checked == true){
    ket1 = " Nonton Tv";
  }
alert('Hobby anda ' +ket+''+ket1);
}
//-->
</script>

<form>
<H1> Memasukkan Data Dengan Objek Checkbox</H1><hr>
<p>Hobby anda :
<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola
<input type="checkbox" value="ON" name="tv">Nonton televisi</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
tampilan:
silahkan download scriptnya disini.

Load disqus comments

0 komentar