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

jQuery 绝对是一个伟大的开源javaScript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 Javascript，在今天这篇代码片段分享文章中，我们收集了10个超棒超实用的jQuery表单处理代码，希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题，希望大家喜欢！1. 在表单中禁用“回车键”大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助：

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

在线调试/在线演示2. 清除所有的表单数据可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。

1. functionclearForm(form){
2. //iterateoveralloftheinputsfortheform
3. //elementthatwaspassedin
4. $(':input',form).each(function(){
5. vartype=this.type;
6. vartag=this.tagName.toLowerCase();//normalizecase
7. //it'soktoresetthevalueattroftextinputs,
8. //passWordinputs,andtextareas
9. if(type=='text'||type=='password'||tag=='textarea')
10. this.value="";
11. //checkboxesandradiosneedtohavetheircheckedstatecleared
12. //butshould*not*havetheir'value'changed
13. elseif(type=='checkbox'||type=='radio')
14. this.checked=false;
15. //selectelementsneedtohavetheir'selectedIndex'propertysetto-1
16. //(thisworksforbothsingleandmultipleselectelements)
17. elseif(tag=='select')
18. this.selectedIndex=-1;
19. });
20. };

在线调试/在线演示3. 将表单中的按钮禁用下面的代码对于Ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：

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

在线调试/在线演示可能大家往往会使用.attr(‘disabled',false);，不过这是不正确的调用。4. 输入内容后启用递交按钮这个代码和上面类似，都属于帮助用户控制表单递交按钮。使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。

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

在线调试/在线演示5. 禁止多次递交表单多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：

1. $(document).ready(function(){
2. $('form').submit(function(){
3. if(typeofjQuery.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. returntrue;
9. }
10. else
11. {
12. returnfalse;
13. }
14. });
15. });

在线调试/在线演示6. 高亮显示目前聚焦的输入框标示有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：

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

在线调试/在线演示7. 动态方式添加表单元素这个方法可以帮助你动态的添加表单中的元素，比如，input等：

1. //changeeventonpassword1fieldtopromptnewinput
2. $('#password1').change(function(){
3. //dynamicallycreatenewinputandinsertafterpassword1
4. $("#password1").append("<inputtype='text'name='password2'id='password2'/>");
5. });

在线调试/在线演示8. 自动将数据导入selectbox中下面代码能够使用ajax数据自动生成选择框的内容

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

在线调试/在线演示9. 判断一个复选框是否被选中代码很简单，如下：

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

在线调试／在线演示10. 使用代码来递交表单代码很简单，如下：

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

在线调试/在线演示希望这些jQuery代码会对你的开发有帮助，如果你也有类似的代码，请和我们分享！