不可错过的10个超棒jQuery表单操作代码片段
jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中,gbin1收集了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操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:
禁用按钮:
$("#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表单操作代码片段的更多相关文章
- 10个超棒jQuery表单操作代码片段
jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里 ...
- 10 个实用的 jQuery 表单操作代码片段
jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...
- 10 个超棒的 JavaScript 简写技巧
今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...
- 推荐10个超棒的jQuery工具 提示插件
脚本之家 http://www.jb51.net/article/28525.htm
- 推荐 10 个超棒的 CSS3 代码生成工具
新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 但是许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 Web ...
- GitHub开源的10个超棒后台管理面板
目录1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8.i ...
- [CSS工具推荐]0001.推荐 10 个超棒的 CSS3 代码生成工具
引言:新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 现在许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- 【收藏】8段JQuery处理表单的代码片段,很实用
1 只接受数字输入 $("#uAge").keydown(function(event) { // 允许退格和删除键 if ( event.keyCode == 46 || eve ...
随机推荐
- Python学习笔记015——readline与readlines的区别
示例1 读取同样一个文件binary_read_1.txt. 春眠不觉晓,处处闻啼鸟. 夜来风雨声,花落知多少. 其中该文件内容被下段代码读出(注意,这里是采用的readlines) f = open ...
- Linux内核(12) - 子系统的初始化之那些入口函数
内核选项的解析完成之后,各个子系统的初始化即进入第二部分—入口函数的调用.通常USB.PCI这样的子系统都会有一个名为subsys_initcall的入口,如果你选择它们作为研究内核的切入点,那么就请 ...
- .NET设计模式(4):建造者模式(Builder Pattern)(转载)
概述 在 软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧 烈的变化,但是将它们组合在一起的算法确相对稳 ...
- java读取url中json文件中的json数据
有时候需要远程从其他接口中获取json数据,如果遇到返回的json数据是一个文件而不直接是数据,那么可以通过以下方法进行读取: /** * 从数据接口获取到数据 * @return * @throws ...
- 机器学习 Top 20 Python 开源项目
转自:http://mp.weixin.qq.com/s?__biz=MzA4MjEyNTA5Mw==&mid=2652565022&idx=1&sn=9aa035097120 ...
- Centos编译Hadoop 2.x 源码
1. 前言 Hadoop-2.4.0的源码目录下有个BUILDING.txt文件,它介绍了如何在Linux和Windows下编译源代码,本文基本是遵照BUILDING.txt指示来操作的,这里再做一下 ...
- 【Android】6.0 第6章 对话框--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-08 在Android应用中,常用的对话框有:Toast.AlertDialog.ProgressDialog.时间选择对话框.日 ...
- 如何保证RabbitMQ的消息不丢失及其背后的原理
一.消息为什么丢失 RabbitMQ默认情况下的交换机和队列以及消息是非持久化的,也就是说在服务器重启或者宕机恢复后,之前创建的交换机和队列都将不复存在,之前未消费的消息也就消失不见了.原因在于每个队 ...
- CSS里有哪些常见的块级元素和行内元素以及其区别?
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- 算法初探——大O表示法
#include <stdio.h> #include<malloc.h> int sum2(int n)//时间复杂度为常数,记为大欧-->O(1) { ; sum = ...