全部在线演示
jQuery 绝对是一个伟大的开源javascript类库，是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的 javascript，在今天这篇代码片段分享文章中，gbin1收集了10个超棒超实用的jQuery表单处理代码，希望能够在大家的开发过程中帮助大 家更好更快的处理表单相关问题，希望大家喜欢！如果你也有相关的代码，请大家积极分享！
相关阅读：10个实用的jQuery代码片段
代码片段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（“”）;
}）;
代码片段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 += ‘’ + j［i］.optionDisplay + ‘’;
}
$（“select#ctlPerson”）.html（options）;
}）
}）
}）
代码片段9： 判断一个复选框是否被选中
代码很简单，如下：
$（‘#checkBox’）.attr（‘checked’）;
代码片段10： 使用代码来递交表单
代码很简单，如下：
$（“#myform”）.submit（）;
希望大家觉得这些jQuery代码会对你的开发有帮助，如果你也有类似的代码，请和我们分享！
来源：不可错过的10个超棒jQuery表单操作代码片段
