Temans,

Rencananya mau membuat beberapa halaman tour jquery learning. Mudah2an bisa bermanfaat buat yang lain.Pemikiran saat ini mencakup beberapa topic yakni :
a. Form filtering
b. Form submit ajax
c. Jquery UI
d. JQuery additional Plugin

Kita mulai saja dari yang paling dasar yakni kaitannya dengan attribute selector.

Attribute biasanya dilekatkan dengan informasi id or class ataupun hanya dengan sebuah name.
Mari kita coba buat salah satu sample code untuk beberapa case text,input,radiobutton dan checkbox.
Untuk kebutuhan diatas kita coba tambahkan ID selector ke form sedangkan element dibawah form hanya diidentifikasikan berdasarkan namanya saja.

Misalkan :

 <form id="personal_details">

 </form>

Untuk mengakses form diatas kita bisa panggil dengan dua cara :
cara 1 :  $(‘#personal_details’)
cara 2 :  $(‘[name=personal_details]‘)

Jika kita tambahkan element lainnya misalkan select option

<form id="personal_details">
 <select name="age_range">
 <option value="">Please select an age range</option>
 <option value="1">0-12</option>
 <option value="2">13-25</option>
 </select>
</form>

Untuk mengakses form diatas kita bisa coba panggil sbb :

 $('#personal_details [name=age_range]').change(function () {
 var text = $('[name=age_range] option:selected').text();
 alert(text);
 });

Penambahan element CheckBox :

 <input type="checkbox" name="sports" value="soccer" />Soccer<br/>
 <input type="checkbox" name="sports" value="swimming" />Swimming<br/>
 <input type="checkbox" name="sports" value="cycling" />Cycling<br/>
 <input type="checkbox" name="sports" value="kayaking" />Kayaking<br/>
 <input type="checkbox" name="sports" value="volleyball" />Volleyball<br/>
 <input type="checkbox" name="sports" value="basketball" />Basketball<br/>

Untuk mengakses event click dari checkBox dan display setiap click dapat dilakukan
sebagai berikut :

 $('[name=sports]').click(function() {
 var str='';
 $('[name=sports]:checked').each(function () {
 str += $(this).val() + " ";
 });
 alert(str);
 });

Penambahan element Multiple Selection :

 <select name="garden" multiple="multiple">
 <option>Flowers</option>
 <option selected="selected">Shrubs</option>
 <option>Trees</option>
 <option selected="selected">Bushes</option>
 <option>Grass</option>
 <option>Dirt</option>
 </select>

Untuk mengakses event multiple selection dan display selection dapat dilakukan
sebagai berikut :

 $("[name=garden]").change(function () {
 var str = "";
 $("[name=garden] option:selected").each(function () {
 str += $(this).text() + " ";
 });
 $("div").text(str);
 });

Berikut full code yang bisa dicoba :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery First Impression</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/demo.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
$('#personal_details [name=age_range]').change(function () {
var text = $('[name=age_range] option:selected').text();
alert(text);
});

$('[name=sports]').click(function() {
var str='';
$('[name=sports]:checked').each(function () {
str += $(this).val() + " ";
});
alert(str);
});

$("[name=garden]").change(function () {
var str = "";
$("[name=garden] option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
});
</script>
<form id="personal_details">
<select name="age_range">
<option value="">Please select an age range</option>
<option value="1">0-12</option>
<option value="2">13-25</option>
</select>
</form>
<br>

<input type="checkbox" name="sports" value="soccer" />Soccer<br/>
<input type="checkbox" name="sports" value="swimming" />Swimming<br/>
<input type="checkbox" name="sports" value="cycling" />Cycling<br/>
<input type="checkbox" name="sports" value="kayaking" />Kayaking<br/>
<input type="checkbox" name="sports" value="volleyball" />Volleyball<br/>
<input type="checkbox" name="sports" value="basketball" />Basketball<br/>
<br>

<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>

</body></html>

Salam hangat penuh semangat,

Aries

Advertisement