`

常用的jquery表单操作代码

阅读更多
1.表单中禁用回车键
$("#form").keypress(function(e) {
    if (e.which == 13) {
    return false;
}
});

2清除所有的表单数据
function clearForm(form) {
$(':input', form).each(function() {
     var type = this.type;
     var tag = this.tagName.toLowerCase();
     if (type == 'text' || type == 'password' || tag == 'textarea')
       this.value = "";
       else if (type == 'checkbox' || type == 'radio')
       this.checked = false;
       else if (tag == 'select')
       this.selectedIndex = -1;
});
};

3将表单中的按钮禁用
//禁用按钮:
$("#somebutton").attr("disabled", true);
//启动按钮:
$("#submit-button").removeAttr("disabled");

4. 输入内容后启用递交按钮
$('#username').keyup(function() {
$('#submit').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高亮显示目前聚焦的输入框标示
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});

7动态方式添加表单元素
$('#password1').change(function() {
//dynamically create new input and insert after password1
$("#password1").append("<input type='text' name='password2' id='password2' />");
});

8自动将数据导入selectbox中
$(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表单验证代码.rar_实用的jQuery表单验证代码

    通过学习和应用“实用的jQuery表单验证代码”,开发者能够更好地理解和实践上述知识点,构建出具有交互性与用户体验俱佳的表单验证功能。同时,该代码作为一个实例,有助于加深对jQuery及其在表单验证中应用的理解,...

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

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

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

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

    jQuery表单验证实例代码

    在本文中,我们将深入探讨如何使用jQuery进行表单验证,主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作,使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点: 1. ...

    jquery表单验证代码百度注册页面表单验证

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务,使得开发者能够更高效地编写JavaScript代码。 首先,我们来理解jQuery的基本用法。jQuery通过选择器(如$("#id"),$...

    使用jQuery ajax提交表单代码

    在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理响应。 1. **jQuery的$.ajax()函数** - **基本语法**:`$.ajax({ options });` - **选项...

    jquery表单验证插件

    本文主要针对“jquery表单验证插件”进行详细介绍,并通过示例代码展示其使用方法。 #### 二、jQuery Form插件介绍 jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。...

    jQuery手机端个人信息填写表单页面代码.zip

    总结,"jQuery手机端个人信息填写表单页面代码.zip"这个资源展示了如何使用jQuery来构建一个交互性强、用户体验好的手机端表单页面。通过学习这个实例,开发者不仅可以了解如何利用jQuery处理表单数据,还能掌握如何...

    jQuery表单验证代码

    在IT领域,jQuery是一个...总之,jQuery表单验证是Web前端开发中一个实用且重要的技能,它涉及到了用户输入处理、DOM操作、正则表达式、事件处理、Ajax请求等多个方面,通过熟练掌握这些,能提升网站的交互性和可用性。

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    jQuery作为一个强大的JavaScript库,提供了简单易用的API来进行表单验证。本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证,并在用户提交form表单时进行有效控制。 首先,我们需要理解jQuery的核心概念...

    jquery操作表单案例

    通过学习和理解这些案例,你可以更好地掌握jQuery在实际表单操作中的应用,提高网页交互的用户体验。 总结,jQuery提供了一套强大且易用的API来处理HTML表单元素,无论是在获取、设置值,还是在处理复选框和单选...

    jQuery复制移除表单元素代码.zip

    本示例“jQuery复制移除表单元素代码”是基于jQuery 1.7.2版本实现的功能,这个版本在当时是相当稳定且广泛使用的。 1. **jQuery库的引入**:描述中提到的`jquery.1.7.2.min.js`是jQuery的核心库文件,它的引入使得...

    jQuery个人信息完善表单代码.zip

    【jQuery个人信息完善表单代码】 在移动互联网时代,用户经常需要在手机端填写个人信息,以完成注册、登录或个性化设置等操作。`jQuery个人信息完善表单代码` 是一个专为手机用户设计的交互式表单解决方案,它利用...

    jQuery手机移动端注册表单验证代码.zip

    本文将围绕"jQuery手机移动端注册表单验证代码.zip"这一主题,详细阐述jQuery在移动端注册表单验证中的应用,以及如何通过提供的资源进行实践操作。 首先,jQuery的核心优势在于其简洁的API和丰富的选择器,这使得...

    jQuery form表单美化实例代码

    最后,`js`目录中的文件通常是JavaScript代码,其中包含了使用jQuery进行表单美化和交互增强的逻辑。jQuery提供了一系列方法,如`.addClass()`, `.removeClass()`, `.toggleClass()`, `.attr()`, `.val()`等,可以...

    简洁实用的jQuery表单验证代码.zip

    在前端开发中,表单验证...总之,这个"简洁实用的jQuery表单验证代码"可能包括了上述的一些或全部技术,为开发者提供了一个快速集成的验证框架。通过学习和理解这些概念,你可以创建更加健壮和友好的前端表单验证系统。

    jquery表单验证特效

    "jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证,这是一种提高用户体验的有效方式,通过实时验证用户输入的数据,确保其正确性和完整性,避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...

    jQuery+CSS3网页表单元素美化代码

    3. **js**:这个文件夹包含了JavaScript源代码,其中可能有使用jQuery编写的函数,用于处理表单的交互逻辑和动画效果。 4. **index.html**:这是网页的主文件,包含HTML结构以及链接到CSS和JavaScript文件的引用。...

    Jquery表单验证特效示例

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,尤其是在处理DOM操作、事件处理以及动画效果等方面。对于表单验证,jQuery提供了一种高效且用户友好的方法,使得开发者...

Global site tag (gtag.js) - Google Analytics