10 个实用的 jQuery 表单操作代码片段

jQuery 绝对是一个伟大的开源JavaScript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 JavaScript，在今天这篇代码片段分享文章中，我们收集了 10个超棒超实用的jQuery表单处理代码，希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题，希望大家喜欢！

1.  在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助：

Javascript代码

1. $("#form").keypress(function(e) {  
2.   if (e.which == 13) {  
3.     return false;  
4.   }  
5. });  

在线调试 / 在线演示

2.  清除所有的表单数据

可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。

Javascript代码

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

在线调试 / 在线演示

3.  将表单中的按钮禁用

下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：

Javascript代码

1. //禁用按钮：  
2. $("#somebutton").attr("disabled", true);  
3. //启动按钮：  
4. $("#submit-button").removeAttr("disabled");  

在线调试 / 在线演示

可能大家往往会使用.attr(‘disabled',false);，不过这是不正确的调用。

4.  输入内容后启用递交按钮

这个代码和上面类似，都属于帮助用户控制表单递交按钮。使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。

Javascript代码

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

在线调试 / 在线演示

5.  禁止多次递交表单

多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：

Javascript代码

1. $(document).ready(function() {  
2.   $('form').submit(function() {  
3.     if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {  
4.       jQuery.data(this, "disabledOnSubmit", { submited: true });  
5.       $('input[type=submit], input[type=button]', this).each(function() {  
6.         $(this).attr("disabled", "disabled");  
7.       });  
8.       return true;  
9.     }  
10.     else  
11.     {  
12.       return false;  
13.     }  
14.   });  
15. });  

在线调试 / 在线演示

6.  高亮显示目前聚焦的输入框标示

有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：

Javascript代码

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

在线调试 / 在线演示

7.  动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素，比如，input等：

Javascript代码

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

在线调试 / 在线演示

8.  自动将数据导入selectbox中

下面代码能够使用ajax数据自动生成选择框的内容

Javascript代码

1. $(function(){  
2.   $("select#ctlJob").change(function(){  
3.     $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){  
4.       var options = '';  
5.       for (var i = 0; i < j.length; i++) {  
6.         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';  
7.       }  
8.       $("select#ctlPerson").html(options);  
9.     })  
10.   })  
11. })  

在线调试 / 在线演示

9.  判断一个复选框是否被选中

代码很简单，如下：

Javascript代码

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

在线调试 ／ 在线演示


10.  使用代码来递交表单

代码很简单，如下：

Javascript代码

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

在线调试 / 在线演示