代码片段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();

表单的几个基本常用功能相关推荐

  1. php判断post是否xss,PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】...

    本文实例讲述了PHP实现表单提交数据的验证处理功能.分享给大家供大家参考,具体如下: 防XSS攻击代码: /** * 安全过滤函数 * * @param $string * @return strin ...

  2. vue中添加附件以及表单内表格动态添加的功能实现

    vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现 页面展示 <el-col :span="12"><el ...

  3. 表单标签的作用、常用的表单控件

    1.1 表单标签的作用 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...

  4. 插入的表单控制下拉框怎么设置_想要告别表单重复填写?这一个功能就够了

    「表单填写关联」这个功能,小伙伴们有没有用过?在一些日常工作中,很多小伙伴习惯使用表单来提升工作效率,在使用过程中,经常会遇到一些问题,例如,不同的表单,相同的信息,需要重复填写,一次两次还好,可是像 ...

  5. phpcms2008的表单向导实现简单的问答功能

    phpcms2008的表单向导功能很强大,可以实现用户的留言功能以及问答功能都是可以的.针对这部分需求,我把我的经验总结写出来,分享给有需要的朋友. 步骤1  -------------请用IE浏览器 ...

  6. 利用beforeSend实现提交加载中、form表单的重复提交等前端功能

    前文   在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...

  7. 表单验证字母数字中文常用正则

    只能输入字母和数字 <el-input v-model="invoiceDate.tax_code" type="text" οninput=" ...

  8. js form表单 鼠标移入弹出提示功能

    JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...

  9. 项目开发中常用JS表单取值方法

    项目开发中常用JS表单取值方法 一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的)         1.form1.Te ...

最新文章

  1. 狄利克雷卷积莫比乌斯反演证明
  2. mysql执行底层_天天写order by,你知道Mysql底层如何执行吗?
  3. vs下 string输出中文 打印中文
  4. C++ : 返回两个字符串的最长公共字符串
  5. linux 6.7 nfs安装yum,centos6.7下安装配置NFS
  6. linux排序语言,Go语言排序sort的使用
  7. JS实现星星评分功能实例代码(两种方法)
  8. 编写一程序,输入一个字符串,查找该字符串中是否包含“abc”。
  9. 对文件指定行进行编辑和保存 linux,linux 文本编辑命令grep sed awk(转)
  10. P1273 有线电视网 树形dp
  11. Nginx 之父被捕,程序员如何避免面向起诉编程?| CSDN 博文精选
  12. java 抽象类 注入,spring向抽象类注入问题
  13. iOS动画之模拟音量振动条
  14. axios的this指向_vue使用axios时this指向哪里
  15. Node.js 环境性能监控探究
  16. java软尾山地车评测_GT Sensor X Pro 软尾山地自行车测评
  17. djs-050微型计算机,合肥造DJS-050机—中国微机的摇篮
  18. win10千万不要重置_ Win10重置此电脑功能详细使用教程
  19. 如何改变图片的像素大小
  20. Autodesk Helius PFA 2019 永久版

热门文章

  1. Linux系统 误删除kvm虚拟机数据恢复方法-数据恢复成功案例
  2. linux清除邮件队列
  3. java web Junit
  4. Scut游戏服务器引擎6.1.5.6发布,直接可运行,支持热更新
  5. Maple Warrior 个人简历
  6. JavaScript eval
  7. EIGRP和传统的距离矢量路由协议的区别
  8. OMS SDK中OPhone应用与BAE JIL中Widget应用的区别
  9. Zookeeper的java实例
  10. 简单入门循环神经网络RNN:时间序列数据的首选神经网络