ITPub博客

首页 > IT职业 > IT生活 > jQuery表单操作经验分享

jQuery表单操作经验分享

IT生活 作者:小梁124 时间:2014-11-13 16:15:38 0 删除 编辑

jQuery可谓是一个伟大的开源JavaScript类库,利用它可以快速、高效地开发前端应用。大家在日常的开发过程中也常常会处理表单相关的javascript,本文主要分享个人觉得非常不错的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更快更好地处理表单问题。

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

有时候可能在表单的操作中需要防止用户意外的按了“回车键”提交表单,那么下面的代码段是简单、快捷地解决了这个问题:


$("#testform").keypress(function(e) {

  if (e.which == 13) {

    return false;

  }

});

2、清除全部表单数据

针对不同的表单形式,调用不同的清除方法,下面的代码会很省事:


function clearForm(form) {

  // 遍历form里面已经被输入的全部input

  $(':input', form).each(function() {

    var type = this.type;

    var tag = this.tagName.toLowerCase(); // 大小写标准化

    // 确定重置input的text、password类型和textarea的值

    if (type == 'text' || type == 'password' || tag == 'textarea')

      this.value = "";

    // checkboxes 和 radios 需要将选中状态清除

    else if (type == 'checkbox' || type == 'radio')

      this.checked = false;

    // select元素需要将它们的”selectedIndex”属性设置为-1,单选和复选都可以

    else if (tag == 'select')

      this.selectedIndex = -1;

  });

};

3、表单中按钮禁用

这个对ajax操作非常有用,可以避免用户更多提交数据,我也经常使用:

禁用按钮:


$("#testbutton").attr("disabled", true);

启用按钮:


$("#submitbutton").removeAttr("disabled");

4、输入内容后启用提交按钮

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


$('#username').keyup(function() {

    $('#submitbutton').attr('disabled', !$('#username').val()); 

});

5、禁止多次提交表单

多次提交表单的确是比较头疼的问题,下面的解决方法可以很好的解决这个问题:


$(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、动态添加表单元素

例如:动态添加。


$('#password1').change(function() {

        $("#password1").append("");

});

7、自动将数据导入selectbox中

可以用ajax数据自动生成选择框的内容。


$(function(){

  $("select#Job").change(function(){

    $.getJSON("test.action",{id: $(this).val(), ajax: 'true'}, function(j){

      var options = '';

      for (var i = 0; i < j.length; i++) {

        options += '';

      }

      $("select# province").html(options);

    })

  })

})

8、判断一个复选框是否被选中


$(“#myform”).attr(“checked”);

9、用代码提交表单


$(“#myform”).submit();

希望这些jQuery代码对各位的开发有所帮助!

文章来源:http://www.nei-mao.com/


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29870867/viewspace-1331391/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-09-11

  • 博文量
    71
  • 访问量
    214131