`
zpball
  • 浏览: 919837 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

10 个实用的 jQuery 表单操作代码片段

阅读更多
http://www.iteye.com/news/26627

jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中,我们收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!
在线调试和演示: http://www.gbin1.com/gb/share/52.htm
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代码会对你的开发有帮助,如果你也有类似的代码,请和我们分享!
分享到:
评论

相关推荐

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

    【jQuery表单操作】jQuery作为一个强大的JavaScript库,极大地简化了前端开发,特别是在处理表单交互时。以下将详细解析给出的四个代码片段,这些代码片段旨在优化和控制表单的行为。 1. **禁止通过回车键提交表单*...

    几个实用的 jQuery 表单操作代码片段

    以下是一些实用的jQuery表单操作代码片段,它们涵盖了表单的常见需求。 1. **禁用‘回车键’提交表单**: 当用户在表单中按下回车键时,有时我们不希望表单被意外提交。通过监听 `keypress` 事件,我们可以阻止...

    60个实用的jQuery代码片段.pdf

    以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...

    《超实用的jQuery代码段》PDF版本下载.txt

    《超实用的jQuery代码段》这本书提供了大量实用的jQuery代码片段,这些片段可以帮助开发者快速地解决实际项目中遇到的问题。通过学习本书,不仅可以提升使用jQuery的能力,还能提高开发效率。对于初学者来说,这本书...

    《超实用 的jQuery代码段》 配套 源码

    《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...

    50个必备的实用jQuery代码段

    ### 50个必备的实用jQuery代码段精解 #### 1. 修改jQuery默认编码 在Web开发中,处理不同编码格式是常见的需求。当你的项目需要与非UTF-8编码的数据交互时,如GB2312,可以通过以下代码片段修改jQuery的默认编码:...

    jQuery滑动表单验证效果.zip_jQuery滑动表单验证效果

    它可能包含了一些关键代码片段和步骤,帮助开发者理解并复制这个效果到自己的项目中。 在jQuery中,表单验证通常通过监听表单元素的`change`、`focusout`或`submit`事件来实现。当这些事件触发时,开发者可以使用`....

    jQuery插件、代码、资料

    资源包中的源码部分可能包含了示例代码、实用函数库以及解决特定问题的代码片段。通过研究这些代码,你可以学习到: 1. DOM操作:如何选择元素、添加删除元素、修改属性和样式。 2. 事件处理:了解如何绑定和触发...

    分享100个直接可以拿来用的JavaScript实用功能代码片段

    在JavaScript的世界里,掌握一些实用的功能代码片段是提升开发效率的关键。这些代码片段涵盖了各种常见的前端开发场景,从DOM操作到事件处理,再到数据处理和动画效果,无一不是前端开发者日常所需。以下是对这些...

    jQuery简单实用分页代码.zip

    在网页开发中,分页是一种常见的用户界面设计,用于处理大量数据或内容的展示。它将数据分成小块,让用户可以逐步...记住,使用开源库和代码片段时,要理解其工作原理并遵循最佳实践,以确保代码的安全性和可维护性。

    jQuery formValidator代码生成器

    总结起来,jQuery formValidator代码生成器是一个实用的工具,它简化了前端表单验证的开发流程,让开发者能够快速实现各种验证规则。通过熟练掌握并运用这个生成器,我们可以构建出既高效又用户友好的表单验证机制,...

    jQuery 常用代码集锦(必看篇)

    本文集锦了多个实用的jQuery代码示例,以便于开发者快速查阅和使用。 首先,关于选择或取消选择页面上所有复选框的代码,可以通过一个变量来控制当前复选框的选中状态,并通过点击链接来切换它们的状态。具体代码...

    jquery 表单下所有元素的隐藏

    总结来说,jQuery提供了一种简洁而有效的方式来隐藏表单内所有元素,这在很多用户界面交互场景中非常实用。通过绑定事件、使用选择器和集合以及应用jQuery的.hide()方法,开发者可以轻松实现这一功能,而无需添加...

    实用HTML5代码片段

    ### 实用HTML5代码片段详解 #### 一、基本HTML5文档结构 在HTML5中,文档的基本结构如下所示: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Untitled &lt;!--[if lt IE 9]&gt; ...

    jQuery蓝色网页右侧栏悬浮在线客服代码.zip

    jQuery插件是扩展jQuery功能的小型代码片段,通常包含特定的JavaScript函数和方法。在这个案例中,可能有一个自定义的jQuery插件用于实现客服悬浮栏的特效,如滑动显示、渐变颜色变化等。开发者可以利用jQuery插件的...

    jQuery easyui后台管理页面tab布局样式代码

    但根据标题和描述,我们可以推测这个压缩包可能包含了一个或者多个实现了jQuery EasyUI Tab布局的示例页面或代码片段,供开发者参考和学习。如果要深入理解并运用这些代码,建议解压文件后查看源代码,了解其具体...

    jquery50个经典案例

    《jQuery 50个经典案例》是一份涵盖了广泛jQuery实用技巧和应用场景的资源集合,旨在帮助开发者深入理解和熟练运用jQuery库。jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、...

    40个实用的jquery用户界面ui设计技巧及教程.doc

    10. **Snippet - jQuery语法高亮插件**:基于SHJS的jQuery插件,方便在HTML文档中快速高亮源代码片段,增强代码可读性。 11. **Google驱动的站内搜索**:利用Google的AJAX搜索API,构建自定义品牌搜索框,支持搜索...

    程序员必知35个jQuery 代码片段

    以上只是35个jQuery代码片段中的五个示例,其他片段可能包括元素选择、事件处理、动画效果、Ajax请求、表单验证等多种实用技巧。掌握这些代码片段,将有助于提升jQuery编程的效率和质量。继续学习和实践,你将能够更...

    jquery

    博主可能会分享一些实用的jQuery代码片段和最佳实践,帮助读者提升开发效率。 `jQuery.chm`文件是一个Windows帮助文档,其中包含了jQuery库的详细API参考。用户可以通过此文档查找特定方法的使用方式、参数说明和...

Global site tag (gtag.js) - Google Analytics