12/20/2011. Penangan CheckBox. Penanganan Form. Mengambil Nilai Checkbox. Penanganan Input Radio

(1)

o0o Web Programming o0o

Penanganan Form

o0o Web Programming o0o Informatics Undip

1 WP-IF-Undip-Rsp

Penangan CheckBox

yDigunakan untuk mendeteksi apakah sebuah checkbox sudah dicek atau belum.

ySintak : ycheckboxObject.checked=true|false 2 WP-IF-Undip-Rsp <script type="text/javascript"> function check(){ document.getElementById("myCheck").checked=true } function uncheck(){ document.getElementById("myCheck").checked=false } </ i t> </script> <body> <form>

</body>

3 WP-IF-Undip-Rsp

Mengambil Nilai Checkbox

for (i=0;i<coffee.length;++ i){ if (coffee[i].checked){( [ ] ){ txt=txt + coffee[i].value + " " }

}

document.getElementById("order").value= "You ordered a coffee with " + txt }

</script> 4 WP-IF-Undip-Rsp

<body>

<p>How would you like your coffee?</p> <form>

<input type="checkbox" name="coffee" value="cream">With cream<br /> <input type="checkbox" name="coffee"

/ value="sugar">With sugar<br /> <br />

Penanganan Input Radio

<input type=radio value="Laki-laki" name="jenkel" onclick="setkel(this.value)">Laki-laki<br> <input type=radio value="Perempuan" name="jenkel" onclick="setkel(this.value)">Perempuan<br> <input type=text id="jenkel">

(2)

Mengambil nilai Select Box

..lanjt..

Select your favorite browser:

<select id="myList" onchange="favBrowser()"> <option>Internet Explorer</option> <option>Netscape</option> / <option>Safari</option> <option>Mozilla Firefox</option> <option>Google Chrome</option> </select>

<p>Your favorite browser is:

</body>

8 WP-IF-Undip-Rsp

Mendelete Option dari ListBox

<html> <head> <script type="text/javascript"> function removeOption(){ var x=document.getElementById("mySelect") x.remove(x.selectedIndex) } </script> </head> 9 WP-IF-Undip-Rsp

..lanjt..

<body> <form> <select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> / <option>Orange</option> <option>Melon</option> </select>

<input type="button" onclick="removeOption()" value="Remove option"> </form> </body> </html> 10 WP-IF-Undip-Rsp

Replace() Method

yDalam javascript replace() method sering digunakan dalam input teks. Karena memungkinkan untuk mengganti karakter tertentu dengan karakter lain. (kata dengan kata lain). yPenggunaannya cukup simple, dengan sintak :

ystring replace(oldSubString newSubString);

ystring.replace(oldSubString, newSubString);

ySebagai contoh, anda mempunyai variabelmessage. Baris berikut akan kata “bad" dengan kata “good":

ymessage.replace(‘bad’, ‘good’);

11 WP-IF-Undip-Rsp

Contoh :

<form name="myForm" > Message: <br>

<textarea name="myTextArea“ cols="40" rows="10" > I think it would be a bad idea to make a badge. </textarea ><br>

<input type="button" value="Replace characters bad" onclick="document.myForm.myTextArea.value = document.myForm.myTextArea.value.replace('bad',

'good');" / > </form >

(3)

P

yD

13 WP-IF-Undip-Rsp

Select Box Option

yBila anda ingin bekerja dengan drop - down select box, object select (yang mewakili select box) memiliki properti yang sangat membantu disebutSelectedIndex, yang memberitahu anda pilihan mana yang telah dipilih user.

yMenggunakan index yang selalu dimulai dari 0, jika user Menggunakan index yang selalu dimulai dari 0, jika user memilih pilihan pertama maka nilai index 0, jika user memilih pilihan kedua, maka nilai index = 1, dst

14 WP-IF-Undip-Rsp

Form Option

<form name="frmCards" method="get" onsubmit="return validate(this)" > <select name="selCards" id="selCards" > <option > Select a suit of cards </option > <option value="hearts" > Hearts </option > <option value="diamonds" > Diamonds </option > <option value="diamonds" > Diamonds </option > <option value="spades" > Spades </option > <option value="clubs" > Clubs </option > </select >

15 WP-IF-Undip-Rsp

Validasi Option

form.selCards.selectedIndex; if (selectedOption==0){ if (selectedOption 0){ returnValue = false

alert("Please select a suit of cards."); }

return returnValue; }

</script>

16 WP-IF-Undip-Rsp

yJika Anda ingin mengakses nilai atribut pada pilihan yang dipilih (bukan nomor indeks) Anda akan menggunakan sintaks berikut:

yform.selCards.options[selected].value

yHal ini karena Anda perlu melihat mana dari [selected] elemen yHal ini karena Anda perlu melihat mana dari [selected] elemen

dipilih untuk mendapatkan nilai dan bukan hanya nomor indeks dari elemen yang dipilih.

Radio Button

ySekelompok radio button berbeda dari kontrol form yang lain, dalam pilihan hanya satu dari kelompok dapat dipilih pada satu waktu, dan semua anggota kelompok berbagi nilai untuk atribut name.

yScript yang berinteraksi dengan radio button biasanya akanScript yang berinteraksi dengan radio button biasanya akan langsung memeriksa bahwa salah satu pilihan telah dipilih, atau mencari tahu pilihan mana yang telah dipilih.

(4)

Contoh :

<form name="frmCards" method="post" onsubmit="return validate(this)" > Please select a suit of cards.

<input type="radio" name="radSuit" value="hearts" / > Hearts <input type="radio" name="radSuit" value="diamonds" / > Diamonds <input type="radio" name="radSuit" value="spades" / > Spades <input type="radio" name="radSuit" value="clubs" / > Clubs <input type="submit" value="Submit choice" / > </form >

19 WP-IF-Undip-Rsp

Validasi Radio Button

for (var i=0; i <radioButtons.length; i++) { if (radioButtons[i].checked) { if (radioButtons[i].checked) { radioChosen=true; returnValue=true; }} if (radioChosen == false) { returnValue = false;

alert("You did not select a suit of cards"); }return returnValue;}

</script>

20 WP-IF-Undip-Rsp

Checkbox

yCheckbox memungkinkan pengguna untuk memilih nol, satu, atau lebih item dari satu set pilihan (mereka tidak saling eksklusif seperti tombol radio).

ySama seperti dengan tombol radio, ketika sekelompok checkbox berbagi nama yang sama juga tersedia dalam checkbox berbagi nama yang sama juga tersedia dalam JavaScript disebut sebagai array.

21 WP-IF-Undip-Rsp

CheckBox

<form name="frmCards" method="post" > Please select one or more suits of cards. <input type="checkbox" name="chkSuit"

value="hearts" / > Hearts

<input type="checkbox" name="chkSuit" value="diamonds" / > Diamonds <input type="checkbox" name="chkSuit"

value="spades" / > Spades

<input type="checkbox" name="chkSuit" value="clubs" / > Clubs

<input type="button" value="Count checkboxes" onclick="countCheckboxes(frmCards.chkSuit)" / > </form > 22 WP-IF-Undip-Rsp

Validasi CheckBox

for (var i = 0; i <field.length; i++) { if (field[i].checked)

intCount++; }

alert("You selected " + intCount + " checkbox(es)");

}

</script>

23 WP-IF-Undip-Rsp

Preventing a Form Submission

yPencegahan form persetujuan sering kali di gunakan check box yMisalnya persetujuan dengan syarat dan ketentuan sebelum

melakukan download.

ySebelum check box (form submission) di check maka tombol download bersifat disable

download bersifat disable.

(5)

Form Submission

I understand that this software has no liability: <input type="checkbox" value="0" name="chkAgree"

id="chkAgree"

onclick="document.frmAgree.btnSubmit.disabled=false" / > <input type="submit" name="btnSubmit" value="Go to download"

/ /

/ > <br / >

<p > You will not be able to submit this form unless you agree to the

<a href="terms.html" > terms and conditions </a > and check the terms and conditions box. </p >

</form > </body >

25 WP-IF-Undip-Rsp

Validasi Form Submission

alert('You must agree to terms and conditions to continue'); return false; } else return true; } </script> 26 WP-IF-Undip-Rsp

Menon-aktifkan Input Text

yKadang kita ingin menon-aktifkan input text sampai suatu kondisi tertentu telah terpenuhi, seperti tombol submit dinon-aktifkan sampai pengguna melakukan centang pada checkbox untuk menyetujuai syarat dan ketentuan.

yContoh berikut berupa formulir pilihan kepada user tentang

d i d k i f b i i

dari mana mendapatkan info tentang web ini.

yDisediakan beberapa pilihan, seperti teman, iklanTV, majalah, dan lainya. Jika pengguna memilih lainnya, maka input text akan dapat di isi sesuai keinginannya.

yAkan tetapi jika sudah memilih pilihan yang tersedia, maka input text akan disable.

27 WP-IF-Undip-Rsp

<h2 > How did you hear about us? </h2 > <form name="frmReferrer" >

<input type="radio" name="radHear" value="1"

onclick="handleOther(this.value);" /> From a friend <br/> <input type="radio" name="radHear" value="2"

onclick="handleOther(this.value);" /> TV Ad <br / > <input type="radio" name="radHear" value="3"p yp onclick="handleOther(this.value);" /> Magazine Ad <br/> <input type="radio" name="radHear" value="4"

onclick="handleOther(this.value);" /> Newspaper Ad <br/> <input type="radio" name="radHear" value="5"

onclick="handleOther(this.value);" /> Internet <br/> <input type="radio" name="radHear" value="other"

onclick="handleOther(this.value);" /> Other... Please specify: <input type="text" name="txtOther" />

</form > 28

Select All Text Area

Check and UnCheck All CheckBox

Your basket order <br />

<input type="checkbox" name="basketItem" value="1" /> Chocolate cookies <br />

<input type="checkbox" name="basketItem" value="2" /> Potato chips <br /> <input type="checkbox" name="basketItem" value="3" /> Cola <br /> <input type="checkbox" name="basketItem" value="4" /> Cheese <br /> <input type="checkbox" name="basketItem" value="5" /> Candy bar <br /> <input type="button" value="Select All"

onclick="check(document.frmSnacks.basketItem);" /> <input type="button" value="Deselect All" onclick="uncheck(document.frmSnacks.basketItem);" />

(6)

..lanjt..

for (var i = 0; i <field.length; i++) { field[i].checked = true;}

}

function uncheck(field) {

for (var i = 0; i <field.length; i++) { field[i].checked = false; } } </script> 31 WP-IF-Undip-Rsp … Any Question… 1 2 3 32 WP-IF-Undip-Rsp