jQuery表單操作程式碼

表單幾乎存在於所有具有互動性的網站中，所以對錶單合理人性化的操作是非常必要的，下面分享了幾個非常常用的程式碼片段。

一.表單中禁用Enter鍵:

在填寫表單的時候，可能會由於習慣動作點選Enter鍵導致表單提交，那麼這個時候禁用Enter鍵是一個比較人性化的措施了。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$("#form").keypress(function(e){
if(e.which == 13){
   return false;
}
})

二.禁用表單按鈕:

在使用ajax的時候可能比較常用，可以防止多次提交資料。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$("#somebutton").attr("disabled",true);//禁用按鈕
$("#submit-button").removeAttr("disabled");//啟用按鈕

在啟用按鈕的時候可能會誤使用

[JavaScript] 純文字檢視 複製程式碼
.attr('disabled',false);

不過以上程式碼是錯誤的，並不能夠啟用按鈕。

三.文字框輸入內容後，啟用按鈕:

此程式碼和上面的程式碼類似。

[JavaScript] 純文字檢視 複製程式碼
$('#username').keyup(function(){
   $('#submit').attr('disabled', !$('#username').val());
});

四.禁止多次提交表單:

多次提交表單時一個在web操作中比較常見，同時也是比較令人頭疼的問題，下面的程式碼能夠比較好的解決此問題:

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function(){
  $('form').submit(function(){
    if(typeof jQuery.data(this,"disabledOnSubmit") == 'undefined'){
      jQuery.data(this, "disabledOnSubmit", { submited:true });
      $('input[type=submit],input[type=button]',this).each(function(){
        $(this).attr("disabled","disabled");
      });
      return true;
    }
    else{
      return false;
    }
  })
})

五.高亮顯示獲得焦點的文字框:

有時候需要使當前正在操作的文字框處於特別的狀態，比如高亮，背景變色等，可以使用如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$("form:input").focus(function(){
  $("label[for='" + this.id + "']").addClass("labelfocus");
  }).blur(function(){
  $("label").removeClass("labelfocus");
});

六.動態方式新增表單元素:

有時候需要根據需要動態新增表單元素，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$('#password1').change(function(){
  $("#password1").append("<input id='password2' type='text' name='password2'>");
});

七.自動將資料匯入selectbox中:

下面程式碼能夠使用ajax資料自動生成選擇框的內容:

[JavaScript] 純文字檢視 複製程式碼
$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id:$(this).val(),ajax:'true'},function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '' + j<i>.optionDisplay + '';
      }
      $("select#ctlPerson").html(options);
    })
  })
})</i>