10个超棒jQuery表单操作代码片段
2015-08-24 14:19
771 查看
原文地址:http://www.haodaima.net/art/1740398
jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!如果你也有相关的代码,请大家积极分享!
大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:
在线调试 在线演示
可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
在线调试 在线演示
下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:
在线调试 在线演示
禁用按钮:
启动按钮:
可能大家往往会使用.attr(‘disabled’,false);,不过这是不正确的调用。
这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。
在线调试 在线演示
多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:
在线调试 在线演示
有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:
在线调试 在线演示
这个方法可以帮助你动态的添加表单中的元素,比如,input等:
在线调试 在线演示
下面代码能够使用ajax数据自动生成选择框的内容
在线调试 在线演示
代码很简单,如下:
在线调试 在线演示
代码很简单,如下:
在线调试 在线演示
希望大家觉得这些jQuery代码会对你的开发有帮助,如果你也有类似的代码,请和我们分享!
jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!如果你也有相关的代码,请大家积极分享!
代码片段1: 在表单中禁用“回车键”
大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:在线调试 在线演示
12345 | $("#form").keypress(function(e) {if (e.which == 13) {return false;}}); |
代码片段2: 清除所有的表单数据
可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。在线调试 在线演示
1234567891011121314151617181920 | 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 textareasif (type == 'text' || type == 'password' || tag == 'textarea')this.value = "";// checkboxes and radios need to have their checked state cleared// but should *not* have their 'value' changedelse 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"); |
代码片段4: 输入内容后启用递交按钮
这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。在线调试 在线演示
123 | $('#username').keyup(function() {$('#submit').attr('disabled', !$('#username').val());}); |
代码片段5: 禁止多次递交表单
多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:在线调试 在线演示
123456789101112131415 | $(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: 高亮显示目前聚焦的输入框标示
有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:在线调试 在线演示
12345 | $("form :input").focus(function() {$("label[for='" + this.id + "']").addClass("labelfocus");}).blur(function() {$("label").removeClass("labelfocus");}); |
代码片段7: 动态方式添加表单元素
这个方法可以帮助你动态的添加表单中的元素,比如,input等:在线调试 在线演示
12345 | //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' />");}); |
代码片段8: 自动将数据导入selectbox中
下面代码能够使用ajax数据自动生成选择框的内容在线调试 在线演示
1234567891011 | $(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马赛克拼接翻转效果代码分享
- jquery 元素选择器集合
- jQuery 表单对象属性过滤现则器
- jquery 地址栏链接与a标签链接匹配 特效代码总结(二)
- jquery extend的用法
- jquery/js特效代码总结(一):tab切换
- jquery+CSS实现的水平布局多级网页菜单效果
- jQuery实现的背景动态变化导航菜单效果
- Jquery获取表单select元素的文本
- 0000005_java学习之路_ko+jquery获取select选中项信息
- jquery带下拉菜单和焦点图代码分享
- jQuery仿360导航页图标拖动排序效果代码分享
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- jquery--创建一个自定义 jQuery 插件
- jquery--jQuery.extend 函数详解
- jquery实现的蓝色二级导航条效果代码
- angular 封装 Jquery插件时作用域问题
- jquery实现的仿天猫侧导航tab切换效果
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- jquery1.9删除的browser,live,die,sub,toggle的替换方法