(转)http://www.qianduan.net/10-awesome-jquery-form-action-code-fragment-not-to-be-missed.html
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: 使用代码来递交表单
代码很简单,如下:
在线调试 在线演示
希望大家觉得这些jQuery代码会对你的开发有帮助,如果你也有类似的代码,请和我们分享!
来源:不可错过的10个超棒jQuery表单操作代码片段
分享到:
相关推荐
可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望...
可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,这里收集了一些超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!
jQuery超棒动态表单验证效果.zip
帮助你生成全屏视频背景的超棒jQuery插件实例,附带源代码
jQuery超棒动态表单验证效果是一款如果填写数据验证失败,输入框会显示红色,点击按钮后,不合法的输入框会左右摇晃提醒用户,非常棒的效果。
这是一个并不引人注目的 jQuery 插件。 2. BetterTip 允许你创建定制的 Tool tips 的 jQuery 插件。 3. EZPZ Tooltip 非常简单的使用边框的 tooltip,同样也可以跟随鼠标。 4. BsTip 各种简单的 ...
超级棒的前端点赞功能,方便且实用
Uploadify是JQuery的一个上传插件,实现的效果非常不错,文档内容详细有条理 特别适合Uploadify初学者 api丰富
对于初学者来说,有的时候很难找到一个好的学习jQuery的网站,所以本文收集了8个很棒的 jQuery 学习网站推荐给大家。 1. Learning jQuery 最好的 jQuery 资源博客之一,从 jQuery 高手那里获得宝贵的经验。 2. ...
非常实用的特效代码,可以完美运行,可以二次修改!
前端工程师-10个超棒的HTML绘画设计工具.docx
可以对你编写的代码进行计数,来看看你编写了多少行代码吧~
一个超棒可视化学习函数式编程的游戏
超棒的环形菜单效果jQuery插件,效果不错,适合做图片查看
Parsleyjs 是一个用来对 Web 表单的输入数据进行验证的 JavaScript 库,无需另写一行 JavaScript 代码。中文版本:https://git.oschina.net/dahouge/Parsley.js 主要特性 基于超棒的用户体验超级方便配置超轻量级...
KINGMAX的超棒U盘,2G大小的,使用的IC是UT165的,慧荣,PID 1307,使用这一个量产工具。运行后在左上角产生好几个按钮,第三个还是第四个,鼠标放上去以后变成CDROM的样子,就那个就是创建USB-CDROM的。
网上银行java项目源代码(含最终文档) 超棒!绝对让你满意。。。