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"); 

 

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