不可錯過的10個超棒jQuery表單操作代碼片段

jjfat 12年前發布 | 11K 次閱讀 jQuery jquery代碼 jquery表單 jquery代碼片段

jQuery 絕對是一個偉大的開源javascript類庫，是幫助我們快速和高效開發前端應用的利器。可能大家在日常的開發過程中常常會處理表單相關的 javascript，在今天這篇代碼片段分享文章中，gbin1收集了10個超棒超實用的jQuery表單處理代碼，希望能夠在大家的開發過程中幫助大 家更好更快的處理表單相關問題，希望大家喜歡！如果你也有相關的代碼，請大家積極分享！

相關閱讀：10個實用的jQuery代碼片段

代碼片段1: 在表單中禁用“回車鍵”

大家可能在表單的操作中需要防止用戶意外的提交表單，那么下面這段代碼肯定非常有幫助：

在線調試

在線演示

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

代碼片段2: 清除所有的表單數據

可能針對不同的表單形式，你需要調用不同類型的清楚方法，不過使用下面這個現成方法，絕對能讓你省不少功夫。

在線調試

在線演示

function clearForm(form) {
  // iterate over all of the inputs for the form   // element that was passed in   $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case     // it's ok to reset the value attr of text inputs,     // password inputs, and textareas     if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared     // but should *not* have their 'value' changed     else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1     // (this works for both single and multiple select elements)     else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

代碼片段3: 將表單中的按鈕禁用

下面的代碼對于ajax操作非常有用，你可以有效的避免用戶多次提交數據，個人也經常使用：

在線調試

在線演示

禁用按鈕：

$("#somebutton").attr("disabled", true);

啟動按鈕：

$("#submit-button").removeAttr("disabled");

可能大家往往會使用.attr(‘disabled',false);，不過這是不正確的調用。

代碼片段4: 輸入內容后啟用遞交按鈕

這個代碼和上面類似，都屬于幫助用戶控制表單遞交按鈕。使用這段代碼后，遞交按鈕只有在用戶輸入指定內容后才可以啟動。

在線調試

在線演示

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val()); 
});

代碼片段5: 禁止多次遞交表單

多次遞交表單對于web應用來說是個比較頭疼的問題，下面的代碼能夠很好的幫助你解決這個問題：

在線調試

在線演示

$(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;
    }
  });
});

代碼片段6: 高亮顯示目前聚焦的輸入框標示

有時候你需要提示用戶目前操作的輸入框，你可以使用下面代碼高亮顯示標示：

在線調試

在線演示

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

代碼片段7: 動態方式添加表單元素

這個方法可以幫助你動態的添加表單中的元素，比如，input等：

在線調試

在線演示

//change event on password1 field to prompt new input $('#password1').change(function() {
        //dynamically create new input and insert after password1         $("#password1").append("<input type='text' name='password2' id='password2' />");
});

代碼片段8: 自動將數據導入selectbox中

下面代碼能夠使用ajax數據自動生成選擇框的內容

在線調試

在線演示

$(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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

代碼片段9: 判斷一個復選框是否被選中

代碼很簡單，如下：

在線調試

在線演示

$('#checkBox').attr('checked');

代碼片段10: 使用代碼來遞交表單

代碼很簡單，如下：

在線調試

在線演示

$("#myform").submit();

希望大家覺得這些jQuery代碼會對你的開發有幫助，如果你也有類似的代碼，請和我們分享！

來源：不可錯過的10個超棒jQuery表單操作代碼片段

 本文由用戶 jjfat 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/57a560