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");
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();
相关推荐
可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,这里收集了一些超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!
可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望...
代码片段: <label for="username" class="username_label">用 户 名 <input maxlength="20" type="text" placeholder="您的用户名和登录名"> </div>
代码片段: 留言 <textarea name="neirong" id="Message" class="Message" cols="30" rows="10"></textarea> <div both"></div> <input name="url" value="" id='burl' ...
代码片段: 用户名: <input type="text" name="" value="" placeholder="4-8位用户名" class="reg_user"> <span class="tip user_hint"> </li>
将常用的组件分类成page页面、content...对于JQuery Mobile的初学者,可以通过生成代码片段进行练习,学习JQuery Mobile所有组件的属性和接口,对于JQuery Mobile开发人员,jQM代码助手可以快速生成代码,提高效率。
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
前言做为一个PHPER,难免会遇到那种表单中jQuery限制输入的问题,比如,限制空格的输入,只允许输入数字,以及小数点的控制等等,这里,我们就说一下数字的限制
代码片段: 删除 回复 | <a ><i class="date-dz-z-click-red">赞 (<i class="z-num">666) </div>
加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家。 1. 创建一个嵌套的过滤器 .filter(:not(:has(.selected))) //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var all...
│ jquery jQuery类库(v1.9.1) │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ ...
这个 WordPress 插件是在 GNU 通用公共许可证 2.0 版下发布的 要自定义插件的功能,请使用原始 Sheepit 文档中提供的自定义 HTML 和 javascript 片段。 您可以通过替换文件“sheepit.php”中编写的 js 代码来使用 ...
├── jquery.validation 表单验证插件 ├── My97DatePicker 日期插件 ├── datatables 表格插件 ├── nprogress 进度条插件 ├── layer layer弹出层插件 ├── laypage laypage 翻页插件 ├── jquery....
为了使它有趣,我使用MCU字符制作了代码片段,每个名称都表示该功能的强大功能。 它们总共是相同的功能,但格式不同。 但是可以肯定,这使我作为开发人员的生活更加轻松。 包括一个Jquery库,以使其无缝运行。 ...
├── jquery.validation 表单验证插件 ├── My97DatePicker 日期插件 ├── datatables 表格插件 ├── nprogress 进度条插件 ├── layer layer弹出层插件 ├── laypage laypage 翻页插件 ├── jquery....
│ jquery jQuery类库(v1.9.1) │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage...
10、分层缓存方案:Yii支持数据缓存,页面缓存,片段缓存和动态内容。缓存的存储介质,可以轻松地更改而不触及应用程序代码。 11、错误处理和日志记录:错误的处理很好的呈现出来,日志信息可以分类,过滤并分配...
所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 通常,我们是通过以下技术来解决静态网页技术在...支持表单和表单的验证; 能将逻辑代码关联到相关的DOM元素上; 能将HTML分组成可重用的组件。
前端js代码片段 var data= { 'a': $('input[name="a"]').val(), 'b': $('input[name="b"]').val() } $.getJSON($SCRIPT_ROOT + '/_add_numbers',data, function(data) { $('#result').text(data.result); $('input...
使用此仓库中的代码片段/代码直接在项目中使用Semantic-UI。 带有表单/日历主题等的示例ui 所有示例均来自语义UI的原始网站-https: 语义UI(IMO)是最好的UI开发框架。 多年以来,我一直使用引导程序,直到一年...