廣告聯播

2009年1月13日 星期二

[JQuery] 選取 Form 表單上 #id , element 的應用

From: Polin Wei

在撰寫 HTML 時, 常需要取得 Selectors 的 #id , element 來作適當的處理, 使用 JQuery 可以直覺式取得您想要的, 並且給您更多. 若對 JQuery 不是很瞭解的話, 不妨可以先看這一篇文章 [教學] How jQuery Works 如何讓 jQuery 正常運作

首先, 先來看下面這一段 HTML 的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("#APPLIER").change(function(){
alert( $(this).val() );
});

$("input[name^='nextSign']").change(function(){
alert( $(this).val() );
});

$("form[name='form2'] input[name='docNo']").change(function(){
alert( $(this).val() );
});

});
</script>
</head>
<body>

<form name="form1">
申請人:<input id="APPLIER" type="text" name="APPLIER" value="PolinWei"><br/>
文件編號:<input type="text" name="docNo" value="doc-123"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E123"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D001"><br/>
</form>

<form name="form2">
申請人:<input id="nextAPPLIER" type="text" name="APPLIER" value="Jamie"><br/>
文件編號:<input type="text" name="docNo" value="doc-456"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E456"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D002"><br/>
</form>

</body>
</html>


程式碼解說:

1.取得 id 值為 APPLIER $("#APPLIER")
2.取得所有 element 值為 input , 且 name 的開頭符合 nextSign $("input[name^='nextSign']")
3.取得 form=form2 , element=input , name=docNo $("form[name='form2'] input[name='docNo']")

當改變這些欄位內的值時, 才會 alert 出改變後的值, 否則就不會出現 alert 的視窗.

沒有留言:

張貼留言