jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中,我们收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!

1.  在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:

  1. $("#form").keypress(function(e) {
  2. if (e.which == 13) {
  3. return false;
  4. }
  5. });

在线调试 / 在线演示

2.  清除所有的表单数据

可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。

  1. function clearForm(form) {
  2. // iterate over all of the inputs for the form
  3. // element that was passed in
  4. $(':input', form).each(function() {
  5. var type = this.type;
  6. var tag = this.tagName.toLowerCase(); // normalize case
  7. // it's ok to reset the value attr of text inputs,
  8. // password inputs, and textareas
  9. if (type == 'text' || type == 'password' || tag == 'textarea')
  10. this.value = "";
  11. // checkboxes and radios need to have their checked state cleared
  12. // but should *not* have their 'value' changed
  13. else if (type == 'checkbox' || type == 'radio')
  14. this.checked = false;
  15. // select elements need to have their 'selectedIndex' property set to -1
  16. // (this works for both single and multiple select elements)
  17. else if (tag == 'select')
  18. this.selectedIndex = -1;
  19. });
  20. };

在线调试 / 在线演示

3.  将表单中的按钮禁用

下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:

  1. //禁用按钮:
  2. $("#somebutton").attr("disabled", true);
  3. //启动按钮:
  4. $("#submit-button").removeAttr("disabled");

在线调试 / 在线演示

可能大家往往会使用.attr(‘disabled',false);,不过这是不正确的调用。

4.  输入内容后启用递交按钮

这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。

  1. $('#username').keyup(function() {
  2. $('#submit').attr('disabled', !$('#username').val());
  3. });

在线调试 / 在线演示

5.  禁止多次递交表单

多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:

  1. $(document).ready(function() {
  2. $('form').submit(function() {
  3. if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
  4. jQuery.data(this, "disabledOnSubmit", { submited: true });
  5. $('input[type=submit], input[type=button]', this).each(function() {
  6. $(this).attr("disabled", "disabled");
  7. });
  8. return true;
  9. }
  10. else
  11. {
  12. return false;
  13. }
  14. });
  15. });

在线调试 / 在线演示

6.  高亮显示目前聚焦的输入框标示

有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:

  1. $("form :input").focus(function() {
  2. $("label[for='" + this.id + "']").addClass("labelfocus");
  3. }).blur(function() {
  4. $("label").removeClass("labelfocus");
  5. });

在线调试 / 在线演示

7.  动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素,比如,input等:

  1. //change event on password1 field to prompt new input
  2. $('#password1').change(function() {
  3. //dynamically create new input and insert after password1
  4. $("#password1").append("<input type='text' name='password2' id='password2' />");
  5. });

在线调试 / 在线演示

8.  自动将数据导入selectbox中

下面代码能够使用ajax数据自动生成选择框的内容

  1. $(function(){
  2. $("select#ctlJob").change(function(){
  3. $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
  4. var options = '';
  5. for (var i = 0; i < j.length; i++) {
  6. options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
  7. }
  8. $("select#ctlPerson").html(options);
  9. })
  10. })
  11. })

在线调试 / 在线演示

9.  判断一个复选框是否被选中

代码很简单,如下:

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

在线调试 / 在线演示

10.  使用代码来递交表单

代码很简单,如下:

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

在线调试 / 在线演示

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

10 个实用的 jQuery 表单操作代码片段的更多相关文章

  1. 不可错过的10个超棒jQuery表单操作代码片段

    jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...

  2. 10个超棒jQuery表单操作代码片段

    jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里 ...

  3. 绝对震撼 10个实用的jQuery/HTML5插件

    在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感 ...

  4. js控制表单操作的常用代码小结

    收集了一些在WEB前台开发中常用的一些控制表单操作函数. 1.鼠标经过时自动选择文本鼠标划过自动选中:<input type="text" value="默认值&q ...

  5. JS 08表单操作_表单域

    一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...

  6. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  7. selenium多表单操作与多窗口,以及警告框处理

    知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...

  8. 【收藏】8段JQuery处理表单的代码片段,很实用

    1 只接受数字输入 $("#uAge").keydown(function(event) { // 允许退格和删除键 if ( event.keyCode == 46 || eve ...

  9. HTML表单操作的记录

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ScrollView中嵌套ListView

    scrollview中嵌入listview,要是直接把listview嵌进scrollview中,listview的高度是固定的不能进行滑动.默认情况下Android是禁止在ScrollView中放入 ...

  2. jsoup 获取指定页面的所有链接(需后续完善)

    java代码如下: import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; impor ...

  3. 大数据处理-bitmap是个神马东西

    1. Bit Map算法简介 所谓的Bit-map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素.由于采用了Bit为单位来存储数据,因此在存储空间方面,可以大大节省. 2. B ...

  4. 【Java多线程】两种基本实现框架

    Java多线程学习1——两种基本实现框架 一.前言 当一个Java程序启动的时候,一个线程就立刻启动,改程序通常也被我们称作程序的主线程.其他所有的子线程都是由主线程产生的.主线程是程序开始就执行的, ...

  5. C++二叉树的实现

    C++实现二叉查找树 啥是二叉查找树 在数据结构中,有一个奇葩的东西,说它奇葩,那是因为它重要,这就是树.而在树中,二叉树又是当中的贵族.二叉树的一个重要应用是它们在查找中的应用,于是就有了二叉查找树 ...

  6. Python的数据处理学习(三)

    三.类的继承   Python 的class可以允许从零开始创建一个定制类,就像文章(二)创建Athlete类一样,也可以通过继承现有的其他类类创建一个类,这也包括用List.set和dict提供的p ...

  7. Tachyon框架的Worker心跳及Master高可用性分析

    0 概述 分布式框架中的Master-Slave类型,Slave节点负责工作的具体执行,Master负责任务的分发或者相关元数据的存储等.一般情况下,一个Master节点都会对应多个Slave节点,M ...

  8. flex中文说明手册

    http://help.adobe.com/zh_CN/Flex/4.0/UsingFlashBuilder/WS6f97d7caa66ef6eb1e63e3d11b6c4d0d21-7f07.htm ...

  9. Python内置方法的时间复杂度(转)

    原文:http://www.orangecube.net/python-time-complexity 本文翻译自Python Wiki本文基于GPL v2协议,转载请保留此协议. 本页面涵盖了Pyt ...

  10. maven缺少依赖包,强制更新命令

    mvn clean install -e -U -e详细异常,-U强制更新