10个jQuery表单操作代码片段详解编程语言

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

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

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

<pre class=”javascript” style=”color: #000000;”>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");

代码片段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();

来自：10个jQuery表单操作代码片段