开发者社区> 测试5555> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

很有用的Jquery代码片段(转)

简介: 代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助: 在线调试 在线演示 $("#form").keypress(function(e) { if (e.which == 13) { return false; }}); 代码片段2: 清除所有的表单数据 可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
+关注继续查看

代码片段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操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:

在线调试

在线演示

禁用按钮:

$("#somebutton").attr("disabled", true);

启动按钮:

$("#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: 判断一个复选框是否被选中

代码很简单,如下:

在线调试

在线演示

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

代码片段10: 使用代码来递交表单

代码很简单,如下:

在线调试

在线演示

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

希望大家觉得这些jQuery代码会对你的开发有帮助,如果你也有类似的代码,请和我们分享!

 

来源:不可错过的10个超棒jQuery表单操作代码片段

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
几个非常实用的JQuery代码片段
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。
1184 0
2012年最有用的50款 jQuery 插件集锦——《表单篇》
  这篇文章继续向大家分享一批实用的 jQuery 插件,今天带来的是网站项目中最常用的表单插件。这是一个系列的文章,将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注。
920 0
很有用的Jquery代码片段(转)
代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助: 在线调试 在线演示 $("#form").keypress(function(e) { if (e.which == 13) { return false; }}); 代码片段2: 清除所有的表单数据 可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
643 0
40款非常有用的 jQuery 插件推荐(系列二)
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
925 0
40款非常有用的 jQuery 插件推荐(系列一)
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
1004 0
jquery常用代码片段
1)判断一个元素是否存在 使用jQuery判断元素是否存在,非常的简单。对于一个jQuery对象,我们只需要用length属性即可判断元素是否存在,如果存在肯定是大于0,示例代码: 判断这个图片是否存在,如果存在在把这个图片替换 $(document).
679 0
分享13款非常有用的 jQuery 插件
  jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果。这篇文章与大家分享13款非常有用的 jQuery 插件。
1087 0
分享24款非常有用的 jQuery 插件
  jQuery在现在的Web开发项目中扮演着重要角色,jQuery让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery以其插件众多、独特、轻量以及支持大规模的网站开发闻名。本文与大家分享24款非常有用的jQuery插件,可以根据您的项目需要来选择使用。
742 0
推荐10个非常有用的jQuery图片插件
您可能还喜欢   60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 分享30个最佳 jQuery Lightbox 效果插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐     jQuery是一个非常优秀的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择。
941 0
+关注
测试5555
前端相关技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Python第五讲——关于爬虫如何做js逆向的思路
立即下载
JavaScript函数
立即下载
JavaScript异步编程
立即下载