资讯频道 → Web前端
阅读更多

9顶
1踩

Web前端

原创新闻 10 个实用的 jQuery 表单操作代码片段

2012-11-27 15:36 by 见习编辑 tyygming 评论(4) 有10586人浏览
jQuery 表单 JavaScript 代码片段

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

jQuery 绝对是一个伟大的开源JavaScript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 JavaScript，在今天这篇代码片段分享文章中，我们收集了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代码会对你的开发有帮助，如果你也有类似的代码，请和我们分享！
来自: www.gbin1.com
9
顶
1
踩
评论 共 4 条 请登录后发表评论
4 楼 Alex丿 2012-11-30 00:07
$(':input', form)  是什么意思,求解释.....
3 楼 k11hao 2012-11-28 09:21
robyjeffding 写道
为什么用btn.attr(‘disabled',false)来启动按纽是不正确的了？？？？

试一下不就知道了
2 楼 beyondqinghua 2012-11-27 18:16
$('#checkBox').is(':checked'); 
1 楼 robyjeffding 2012-11-27 16:46
为什么用btn.attr(‘disabled',false)来启动按纽是不正确的了？？？？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • C# WinForm之间调用、窗口之间传递参数的例子

    C# WinForm之间调用、窗口之间相互传递参数的例子

  • 三种不同的缺省值C#

    关于参数的缺省值之前已经在缺省值和null值的区别和作用 https://blog.csdn.net/number1killer/article/details/80389696 中讲过了，就不赘述了。 下面一起来看实例： ...

  • 谈谈C# 4.0新特性“缺省参数”的实现

    C#4.0关于缺省参数的新特性，相信大家都不会陌生。所谓缺省参数，顾名思义，就是在声明方法的某个参数的时候为之指定一个默认值，在调用该方法的时候如果采用该默认值，你就无须指定该参数。和很多语言层面特性（语法糖）的实现一样，缺省参数也是编译器为我们玩的一个小花招。缺省参数最终体现为两个特殊的自定义特性OptionalAttribute和DefaultParameterValueAttribute 。...

  • c# 4.0 缺省参数

    c#缺省参数新特性就是在声明方法的某个参数的时候为之指定一个默认值，在调用改方法的时候，如果采用该默认值，你就无须指定该参数。缺省参数最终体现为两个特殊的自定义特性OptionalAttribute，DefaultParameterValueAttribute

  • C# 中参数缺省值的注意事项

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

  • 总结C#笔记：基础概述

    一、C#的概述 通过学习我了解到了C#起源于C语言族系，拥有C++的功能，由 Ecma 和 ISO 接受并确立了一系列标准。C#采用与C、C++以及Java一致的大括号风格语法。C#语法简化了C++的诸多复杂性，因此也相对简单且易上手。而同时，又提供了Java不具备的许多强大功能，例如可为null的值类型、枚举、委托、lambda表达式、直接内存访问等等。 二、C#特点 （1）简单。C#简化了C/C++中许多复杂的特性。例如，采用“==”比较操作，从而避免C语言中与赋值操作“=”的混淆错误。 （2）

  • C#4.0 具名参数 和 可选参数

    C# 4.0中的可缺省参数 C# 4.0现在对方法，构造器，以及索引器支持使用可缺省的参数（注：VB支持可缺省参数可是有年头了）。 当参数的默认值作为声明的一部分被指定的时候，参数就是可缺省的。例如，下面这个方法接受2个参数，一个“category” 字符串参数，另一个“pageIndex”整数参数。“pageIndex”参数有一个默认值 0，它因此是一个可缺省的参数： 当调用上面的方法

  • 缺省值，默认值

    c/c++中的缺省值和默认值 1：函数形参匹配默认靠前 Fun(3)其实是调用的fun(3,2) ，函数形参匹配默认靠前，3匹配的是int I;当没有赋值是用初始化值2   2:数组缺省值        inta[5]={1,5,};  1,5,0,0,0   缺省值是0 3：枚举缺省值 ，以0开始，或者接着上面的值 枚举是声明代表整数常量的符号名称 enum num

  • 静态变量和各种类型的缺省值

    静态上下文中只能访问静态成员。static 函数只能访问 static 变量或 static 函数。 数字类型成员的缺省值是0，布尔型为false，对象引用唯一的缺省值类型是null 各种类型的缺省值： boolean: false byte: 0 char: '' short: 0 int: 0 float:0.0 long: 0 double:0.0 Referenc...

  • 缺省是什么

    缺省，即系统默认状态，意思与“默认”相同。 “缺省”最初来源于计算机英文文档中的单词"default"，"default”有很多意思：违约、缺省、拖欠、默认，由于当时计算机方面的翻译水平不高，于是就把这个词直译成了“缺省”，其实应该取它的引申意思“默认”。后来的人们发现，无论怎么解释，缺省好像都说不通，但是由于之前的人们已经习惯了“缺省”这个用法，故依旧延续了这个用法。后来的新一

  • 缺省值

    default value 缺省值（quē shěng zhí）就是默认值。是指一个属性、参数在被修改前的初始值。 计算机软件系统要求用户输入某些值而用户未给定时，系统自动赋予的事先设定的数值。 ●缺省，即系统默认状态。 ●意思是“默认”，也就是说你没有指定用哪件工具，系统自动提供给你的那个就是缺省的，比如你在打开网页时，如果IE是缺省的浏览器，系统就会

  • C#缺省参数可以让代码变得更加简洁明了与时俱进心里敞亮了很多了

    以前没有缺省参数这个说法时,为了让别人调用我们的代码方便一些,会写很多构造函数,例如一个查询方法贴一些代码如下:public DataTable Search(string search) {return Search(string.Empty, search, null, null, string.Empty); }public DataTab...

  • C#默认参数的用法与限制

    默认参数(又译作“缺省参数”)，是C#4.0引入的特性，它的作用是给方法定义某个参数的时候给参数指定一个默认值 例如这样的场景，请求页面数据的时候，我们往往会做分页，入参包含页码(pageIndex)和每页显示数据量(pageSize)两个参数 public List&lt;ModelResponse&gt;GetPageList(int param,string userNo,int pa...

  • C#函数参数默认值及指定传参

    编写函数通常会指定很多参数，但是调用时不一定每个参数都能用得上，使用参数默认值，可以避免在函数体中进一步编写代码进行变量初始化，或者重载函数让代码变得冗长难懂。通过函数参数设置默认值，加上调用的一些小技巧，可以使代码变得简洁优雅，同时也简化了调用。本文介绍C#函数参数默认值初始化，调用函数传参的顺序传参、指定参数传值，函数默认参数值的工作机制。

  • C# 方法参数（默认参数）

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication88 { public partial class Defaul

Global site tag (gtag.js) - Google Analytics