10个超棒jQuery表单操作代码片段
来源:互联网 发布:自动化运维软件 编辑:程序博客网 时间:2024/05/04 01:23
代码片段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("<input type='text' name='password2' id='password2' />");});
代码片段8: 自动将数据导入selectbox中
下面代码能够使用ajax数据自动生成选择框的内容
$(function(){ $("select#countries").change(function(){ $.getJSON("http://www.gbin1.com/gb/networks/uploads/b7819361-e872-4502-8697-9d727ffb603a/data.json", function(j){ var options = '', cities = new Array(); cities = j.cities; for (var i = 0; i < cities.length; i++) { options += '<option value="' + cities[i] + '">' + cities[i] + '</option>'; } $("select#cities").html(options); }); });});
代码片段9: 判断一个复选框是否被选中
$('#checkBox').attr('checked');
代码片段10: 使用代码来递交表单
$("#myform").submit();
0 0
- 10个超棒jQuery表单操作代码片段
- 10个超棒jQuery表单操作代码片段
- 10个超棒jQuery表单操作代码片段
- 10个超棒jQuery表单操作代码片段
- 不可错过的10个超棒jQuery表单操作代码片段
- 不可错过的10个超棒jQuery表单操作代码片段
- 10 个实用的 jQuery 表单操作代码片段
- 10 个实用的 jQuery 表单操作代码片段
- 10个超棒jQuery表单操作代码片段(留着备用)
- jQuery_10 个实用的jQuery表单操作代码片段
- 10个jQuery代码片段
- jquery操作表单元素代码
- 10 个很棒的 jQuery 代码片段
- 10 个很棒的 jQuery 代码片段
- 10 个很棒的 jQuery 代码片段
- 10 个很棒的 jQuery 代码片段
- 10 个很棒的 jQuery 代码片段
- 10个很棒的jQuery代码片段
- Tomcat连接池
- 使用Flash,HTML5和Unity开发网页游戏的对比
- java 获取网页源代码
- 关于uint8_t数据类型的理解
- Android Recovery 代码解析
- 10个超棒jQuery表单操作代码片段
- 关于字符和nls参数
- javascript参考手册CHM中文版,以及PHP,MYSQL,DHTML参考手册下载
- EBSR12.X: 并发管理器oracle toolkit内部错误(REP-3000: 启动 Oracle Toolkit 时发生内部错误.)
- oracle中连接与会话
- 算法之旅,直奔<bitset>之八 flip
- 11g oracle 用户密码过期问题
- Surprising Strings
- Xcode关闭arc