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

标签: Javascript javascript jquery | 发表时间:2012-11-27 18:58 | 作者:terry
出处:http://www.qianduan.net

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

代码片段1: 在表单中禁用“回车键”

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

在线调试   在线演示

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

代码片段2: 清除所有的表单数据

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

在线调试   在线演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:

在线调试   在线演示

禁用按钮:

1
$("#somebutton").attr("disabled", true);

启动按钮:

1
$("#submit-button").removeAttr("disabled");

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

代码片段4: 输入内容后启用递交按钮

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

在线调试   在线演示

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

代码片段5: 禁止多次递交表单

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

在线调试   在线演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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: 高亮显示目前聚焦的输入框标示

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

在线调试   在线演示

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

代码片段7: 动态方式添加表单元素

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

在线调试   在线演示

1
2
3
4
5
//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数据自动生成选择框的内容

在线调试   在线演示

1
2
3
4
5
6
7
8
9
10
11
$(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: 判断一个复选框是否被选中

代码很简单,如下:

在线调试   在线演示

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

代码片段10: 使用代码来递交表单

代码很简单,如下:

在线调试   在线演示

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

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

来源: 不可错过的10个超棒jQuery表单操作代码片段

相关 [jquery 代码 片段] 推荐:

可以直接拿来用的15个jQuery代码片段

- - CSDN博客Web前端推荐文章
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画、特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦. 下面就让我们一起来享受jQuery代码的魅力之处吧.

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

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

jQuery代码优化:基本事件篇

- - 可咔酷 | 网络杂货铺
jQuery对事件系统的抽象与优化也是它的一大特色. 本文仅从事件系统入手,简要分析一下jQuery为什么提供mouseenter和mouseleave事件,它们与标准的mouseover、mouseout事件有什么区别. 说到事件,就要追溯到网景与微软的“浏览器大战”了. 当时,事件模型还没有标准,两家公司的实现就是事实标准.

50个必备的实用jQuery代码段

- Zhaojing - HTML5研究小组
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助. 其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成. 如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312):.

jQuery参考实例 1.2 在DOM加载完毕,页面元素完全加载之前运行jQuery/JavaScript代码

- - CSDN博客推荐文章
本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load. 主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码.

10个实用的PHP代码片段

- - ITeye资讯频道
作为一个PHP开发人员,经常收集一些代码片段是非常有益的,以备将来使用. 这些代码片段可以节省您宝贵的时间,也可以提高您的工作效率.  PHP数组生成 CSV 文件. 这的确是一个很简单的功能,从一个PHP数组生成一个.csv文件. 此函数使用 fputcsv PHP 内置函数生成逗号分隔文件(.CSV).

50个jQuery代码段帮你成为更出色的JS开发者

- - 博客 - 伯乐在线
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助. 其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成. 这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中.

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器,基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. 跟踪地址.

jquery实现滚动到页面底部时无限加载内容的代码

- - CSDN博客Web前端推荐文章
由于时间关系没有整理封装,有空的时候再把他做成一个插件. var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll(function() {. //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.