jQuery表单操作经验分享

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

例如：动态添加。<input/>

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

        $("#password1").append("<input type='text' name='password2' id='password2' />");

});

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代码对各位的开发有所帮助！

 

软酷网作者：赖志文