JQuery 常用的 Form 元素監聽事件

在動態網頁的世界裡，最常使用到的大概就是 Form了，填寫完表單以後都會將資料傳送到 bcak-end，而在傳送之前，資料的驗證都會交由 front-end 來處理，今天就來介紹對於 HTML Form 來說，常用的一些 JQuery 監聽方法。

一. blur()
Blur 發生在當一個元素失去焦點時，所觸發的一個事件。

1. $("input").blur(function() { 
2.     /* Do something... */
3. });

二. change()
change 跟上一個討論 blur 事件很像，但不同的地方在於，當焦點離開元素之前，如果元素的值有改變的話，就會觸發這個事件。

1. $("input").change(function() { 
2.     /* Do something... */ 
3. });

三. focus()
focus() 就是得到焦點，也就是在某個元素被點擊以後所觸發的事件。

1. $("input").focus(function() { 
2.     /* Do something... */ 
3. });

四. select()
select算是很容易讓人混淆的事件，在 text input 元素裡面(或 textarea)，當你將文字反白，就會觸發此事件，但要特別注意的是這個方法並不能將 checkbox 或是 radio 執行勾選。

1. $(":input").select( function () { 
2.     /* Do something... */ 
3. });

五. val()
這大概是 JQuery 最常用到的方法之一， .val() 可以取得 input 元素的值。

1. var email = $("input").val();
2. alert(email);

六. submit()
在表單傳送裡面，submit 的 button 必須一定要包裹在 <form>，如果想要藉由 <form> 以外的元素來觸發可以照以下方式來達成

1. $("#submitBtn").click(function() {
2.     $("#myForm").submit();
3. });

另外想在送出前做表單驗證的話，也可以用 .submit()，當按下 submit 以後，就會進行驗證，假如回傳值是 false，表單就不會送出

1. $("form").submit(function() {
2.     if ($("input").val() == "correct") {
3.         return true;
4.     } else {
5.         return false;
6.     }
7. });

以上幾個範例便是常用的表單監聽方法，基礎觀念如果清晰的話，用起來應該可以得心應手！