很有用的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表单操作代码片段

目录
相关文章
|
运维 监控 安全
服务器运维
服务器运维
|
10月前
|
域名解析 存储 网络协议
深入解析网络通信关键要素:IP 协议、DNS 及相关技术
本文详细介绍了IP协议报头结构及其各字段的功能,包括版本、首部长度、服务类型、总长度、标识、片偏移、标志、生存时间(TTL)、协议、首部检验和等内容。此外,还探讨了IP地址的网段划分、特殊IP地址的应用场景,以及路由选择的大致流程。最后,文章简要介绍了DNS协议的作用及其发展历史,解释了域名解析系统的工作原理。
356 5
深入解析网络通信关键要素:IP 协议、DNS 及相关技术
|
5月前
|
机器学习/深度学习 计算机视觉
YOLOv11改进策略【注意力机制篇】| 添加SE、CBAM、ECA、CA、Swin Transformer等注意力和多头注意力机制
YOLOv11改进策略【注意力机制篇】| 添加SE、CBAM、ECA、CA、Swin Transformer等注意力和多头注意力机制
1461 2
YOLOv11改进策略【注意力机制篇】| 添加SE、CBAM、ECA、CA、Swin Transformer等注意力和多头注意力机制
|
9月前
|
Java
在Java多线程编程中,`wait()`和`notify()`方法的相遇如同一场奇妙的邂逅
在Java多线程编程中,`wait()`和`notify()`方法的相遇如同一场奇妙的邂逅。它们用于线程间通信,使线程能够协作完成任务。通过这些方法,生产者和消费者线程可以高效地管理共享资源,确保程序的有序运行。正确使用这些方法需要遵循同步规则,避免虚假唤醒等问题。示例代码展示了如何在生产者-消费者模型中使用`wait()`和`notify()`。
78 1
|
存储 Web App开发 缓存
网络协议之Tcp、Http全解
TCP头格式和三次握手、四次挥手,HTTP请求报文和响应报文结构。Session和Cookie详解。
492 0
网络协议之Tcp、Http全解
paraformer-large-vad-punc
用的是 paraformer-large-vad-punc 音频版本,识别结果经常出现多句话粘成一句话的问题 比如我说了一句话,安静了四五秒,再说另一句话,识别出来算是一句话,没有办法能很好地分开成两句话 现在出来了大量的这种问题,很多话被连成一句话,很影响效果 vad 模型是不是效果不太好啊? 有什么参数可以设置吗? 求教
112 0
|
存储 C++
C++职工管理系统(课程设计报告(二)
C++职工管理系统(课程设计报告(二)
|
机器学习/深度学习 传感器 算法
【电力系统】基于cplex求解综合能源系统优化问题附matlab代码
【电力系统】基于cplex求解综合能源系统优化问题附matlab代码
|
缓存 Oracle 关系型数据库
【数据设计与实现】第5章:同步与互斥
同步与互斥设计原则数据库的一个重要能力就是为多个用户提供并发访问服务,并发度是考察数据库性能的重要指标之一。事务隔离级别定义了并发控制算法的正确性,并让用户通过选择隔离级别在正确性和高性能之间进行平衡。事务重点考虑的是数据层面的并发控制,是属于较上层的同步与互斥。实际上,数据库系统是由大量进程、线程、数据结构构成的,进程、线程会并发地访问、修改数据结构,还需要在较底层级解决数据结构的同步与互斥问题
【数据设计与实现】第5章:同步与互斥
|
存储 编译器 Linux
C/C++ :程序环境和预处理(上)
C/C++ :程序环境和预处理(上)