表单的几个基本常用功能
代码片段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 textareasif (type == 'text' || type == 'password' || tag == 'textarea')this.value = "";// checkboxes and radios need to have their checked state cleared// but should *not* have their 'value' changedelse 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: 将表单中的按钮禁用:
$("#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();
表单的几个基本常用功能相关推荐
- php判断post是否xss,PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】...
本文实例讲述了PHP实现表单提交数据的验证处理功能.分享给大家供大家参考,具体如下: 防XSS攻击代码: /** * 安全过滤函数 * * @param $string * @return strin ...
- vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现 页面展示 <el-col :span="12"><el ...
- 表单标签的作用、常用的表单控件
1.1 表单标签的作用 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
- 插入的表单控制下拉框怎么设置_想要告别表单重复填写?这一个功能就够了
「表单填写关联」这个功能,小伙伴们有没有用过?在一些日常工作中,很多小伙伴习惯使用表单来提升工作效率,在使用过程中,经常会遇到一些问题,例如,不同的表单,相同的信息,需要重复填写,一次两次还好,可是像 ...
- phpcms2008的表单向导实现简单的问答功能
phpcms2008的表单向导功能很强大,可以实现用户的留言功能以及问答功能都是可以的.针对这部分需求,我把我的经验总结写出来,分享给有需要的朋友. 步骤1 -------------请用IE浏览器 ...
- 利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文 在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
- 表单验证字母数字中文常用正则
只能输入字母和数字 <el-input v-model="invoiceDate.tax_code" type="text" οninput=" ...
- js form表单 鼠标移入弹出提示功能
JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...
- 项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法 一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
最新文章
- 狄利克雷卷积莫比乌斯反演证明
- mysql执行底层_天天写order by,你知道Mysql底层如何执行吗?
- vs下 string输出中文 打印中文
- C++ : 返回两个字符串的最长公共字符串
- linux 6.7 nfs安装yum,centos6.7下安装配置NFS
- linux排序语言,Go语言排序sort的使用
- JS实现星星评分功能实例代码(两种方法)
- 编写一程序,输入一个字符串,查找该字符串中是否包含“abc”。
- 对文件指定行进行编辑和保存 linux,linux 文本编辑命令grep sed awk(转)
- P1273 有线电视网 树形dp
- Nginx 之父被捕,程序员如何避免面向起诉编程?| CSDN 博文精选
- java 抽象类 注入,spring向抽象类注入问题
- iOS动画之模拟音量振动条
- axios的this指向_vue使用axios时this指向哪里
- Node.js 环境性能监控探究
- java软尾山地车评测_GT Sensor X Pro 软尾山地自行车测评
- djs-050微型计算机,合肥造DJS-050机—中国微机的摇篮
- win10千万不要重置_ Win10重置此电脑功能详细使用教程
- 如何改变图片的像素大小
- Autodesk Helius PFA 2019 永久版