免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 分享资源 > 文章正文

不可错过的10个超棒jQuery表单操作代码片段

时间:11-27 16:59 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分

不可错过的10个超棒jQuery表单操作代码片段

全部在线演示

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表单操作代码片段

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,不可错过的10个超棒jQuery表单操作代码片段对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与不可错过的10个超棒jQuery表单操作代码片段无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈