技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> 10个超棒jQuery表单操作代码片段

10个超棒jQuery表单操作代码片段

浏览:3373次  出处信息

jQuery绝对是一个伟大的开源javascript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript，在今天这篇代码片段分享文章中，这里收集了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操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：
禁用按钮：
1

$("#somebutton").attr("disabled",true);
启动按钮：
1

$("#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: 判断一个复选框是否被选中
代码很简单，如下：
1

$('#checkBox').attr('checked');
代码片段10: 使用代码来递交表单
代码很简单，如下：
1

$("#myform").submit();
希望大家觉得这些jQuery代码会对你的开发有帮助，如果你也有类似的代码，请和我们分享！
来源：不可错过的10个超棒jQuery表单操作代码片段


						
										

						
						
						
					

										

					
										
建议继续学习：

					
    
													
  1. JQuery实现Excel表格呈现    (阅读：46524)
    2. 
													
  2. 分享一个JQUERY颜色选择插件    (阅读：12655)
    3. 
													
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读：9688)
    4. 
													
  4. 10个强大的Ajax jQuery文件上传程序    (阅读：7758)
    5. 
													
  5. Web表单设计之注册表单    (阅读：7692)
    6. 
													
  6. jQuery的data()方法    (阅读：7588)
    7. 
													
  7. jQuery性能优化指南    (阅读：7331)
    8. 
													
  8. jQuery Color Animations颜色动画插件    (阅读：7092)
    9. 
													
  9. 精于图片处理的10款jQuery插件    (阅读：6227)
    10. 
													
  10. jQuery中getJSON跨域原理详解    (阅读：5621)
    11. 
												
					

										
					
					
					
					

						QQ技术交流群：445447336，欢迎加入！

						扫一扫订阅我的微信号：IT技术博客大学习

						
					

					

				


			

				
			

				
 << 前一篇：Ext JS 4 布局和容器：Layouts、Containers

				
后一篇：javascript扩展Array(数组)类 >>

			

			
			

				
文章信息

				
				
			


			
            


        


        
 

            






            


            


            

            

                





				

            






















            
        
 

    
 

            
    
    

            © 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习
        
        

        

		京ICP备15002552号-1