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

代码片段1: 在表单中禁用“回车键”

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

在线调试  在线演示

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

代码片段2: 清除所有的表单数据

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

在线调试  在线演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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: 输入内容后启用递交按钮

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

在线调试  在线演示

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

代码片段5: 禁止多次递交表单

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

在线调试  在线演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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: 高亮显示目前聚焦的输入框标示

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

在线调试  在线演示

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

代码片段7: 动态方式添加表单元素

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

在线调试  在线演示

1
2
3
4
5
//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数据自动生成选择框的内容

在线调试  在线演示

1
2
3
4
5
6
7
8
9
10
11
$(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. 不可错过的10个超棒jQuery表单操作代码片段

    jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...

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

    jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...

  3. 10 个超棒的 JavaScript 简写技巧

    今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...

  4. js控制表单操作的常用代码小结

    收集了一些在WEB前台开发中常用的一些控制表单操作函数. 1.鼠标经过时自动选择文本鼠标划过自动选中:<input type="text" value="默认值&q ...

  5. JS 08表单操作_表单域

    一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...

  6. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  7. 推荐10个超棒的jQuery工具 提示插件

    脚本之家 http://www.jb51.net/article/28525.htm

  8. 推荐 10 个超棒的 CSS3 代码生成工具

    新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 但是许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 Web ...

  9. selenium多表单操作与多窗口,以及警告框处理

    知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...

随机推荐

  1. C#与Java的语法差异

    C#与Java的语法差异C与Java的语法差异前言程序结构基本语法数据类型字符串变量与常量运算符判断语句循环语句访问权限方法数组结构枚举类继承多态运算符重载接口命名空间预处理器指令正则表达式异常IO泛 ...

  2. ubuntu 终端无法启动:ImportError: cannot import name 'sysconfig' from 'distutils'

    gnome-terminal 出错 ImportError: cannot import name '_gi' 系统:ubuntu17 装了python2.7.13, 之后陆续装了python3.5. ...

  3. 【转】memcached分布式部署

    FROM : http://www.tuicool.com/articles/777nE3j memcache和memcached两者使用起来几乎一模一样. $mem = new Memcache; ...

  4. [转]nginx下的url rewrite

    转:http://zhengdl126.iteye.com/blog/698206 if (!-e $request_filename){rewrite "^/index\.html&quo ...

  5. Spring MVC 返回类型为字符串时, 返回中文变成"?"处理

    Spring controller 如下 @Controller public class SimpleController { @ResponseBody @RequestMapping(value ...

  6. Logistic Regression总结

    转自:http://blog.csdn.net/dongtingzhizi/article/details/15962797 Logistic回归总结 作者:洞庭之子 微博:洞庭之子-Bing (20 ...

  7. Triangle leetcode java

    题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...

  8. Cocos2d-X研究之v3.x 事件分发机制具体解释

    事件分发机制 " src="http://www.cgzhw.com/wp-content/uploads/2014/07/inherent3.png" style=&q ...

  9. javascript 将treeNode 转换id和pid的Array

    function treeTolist(treeNodes, opt) { if (!opt) { opt = {}; opt.key = "id"; opt.parent = & ...

  10. npm配置镜像、设置代理

    配置镜像 by config command npm config set registry http://registry.cnpmjs.orgnpm info underscore (如果上面配置 ...