jQuery学习笔记2——表单操作
2013-06-27 05:05
639 查看
一、获取和设置表单的值:val()和text()
1. 获取表单的值: $("#username").val();
2. 设置表单的值:
html部分
二、常用代码
1.重置表单
2. 清空内容
$("#text_id").attr("value",'');
3.单选框
3.1 回填赋值
3.2 获取单选按钮的值:
var valradio = $("input[@type=radio][@checked]").val();
3.3:获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();
3.4:设置value=2的项目为当前选中项:
$("input[@type=radio]").attr("checked",'2');
3.5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
var item = $('input[@name=items][@checked]').val();
3.6:radio单选组的第二个元素为当前选中值:
$('input[@name=items]').get(1).checked = true;
4.多选框
4.1:得到多选框的值
var checkboxval = $("#checkbox_id").attr("value");
4.2:使其未勾选
$("#chk_id").attr("checked",'');
4.3 勾选
$("#chk_id").attr("checked",true);
3:判断是否已经选中
if($("#chk_id").attr('checked')==true) {
...
}
5. 下拉框
5.1:获取下拉列表的值
var selectval = $('#select_id').val();
5.2 设置value=test的项目为当前选中项:
$("#select_id").attr("value",'test');
5.3 添加下拉框的option:
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")
5.4:清空下拉框:
$("#select_id").empty();
6:获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
7:select下拉框的第二个元素为当前选中值:
$('#select_id')[0].selectedIndex = 1;
二、综合案例
1、级联选择1
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/17/fecef46f0efb0367a88912f5778d39ff.png)
2、级联选择2
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/17/309adb82f3b95db2a705f0b037f40864.png)
2-1 Ajax级联选择
在线调试 / 在线演示
3. [b]防止重复提交[/b]
多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:
在线调试 / 在线演示
方案1 : 加在 按钮上
特点: 点击按钮就执行,发生在 表单验证逻辑之前
将表单中的按钮禁用
下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据:
可能大家往往会使用.attr(‘disabled',false);,不过这是不正确的调用
方案2:加在 form 上
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
如果上面方法都不灵就用这个
[b]输入内容后启用递交按钮[/b]
递交按钮只有在用户输入内容后才可以启动 在线调试 / 在线演示
4.改变文本框的获得焦点的样式
也可对标签高亮显示
在线调试 / 在线演示
5.复选框进行全选,反选,全不选操作
6. 在表单中禁用“回车键”
7.清除所有的表单数据
可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
1. 获取表单的值: $("#username").val();
2. 设置表单的值:
$("#username").val("我来了"); $("input[name='password']").val() //checkbox得到的是一个数组,需要进行遍历 $("input[name='interest']:checked").each(function(n){ alert($(this).val()); }); //checkbox只能传入数组 $("input[name='interest']").val(["足球","篮球","羽毛球"]); $("#address").val(); //获取select的值,即编号或下标 $("#address").text() //获取select中的所有文本
html部分
<form id="myform"> 用户名:<input type="text" name="username" id="username"/><br/> 密 码:<input type="password" name="password" id="password"/><br/> 用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球 <input type="checkbox" name="interest" value="篮球"/>蓝球 <input type="checkbox" name="interest" value="羽毛球"/>羽毛球 <input type="checkbox" name="interest" value="游泳"/>游泳<br/> 用户性别:<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女<br/> 用户户籍:<select name="address" id="address"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">昭通</option> <option value="4">彝良</option> </select> <br/> <input type="button" value="测试数据" id="btn"/> </form>
二、常用代码
1.重置表单
$("form").each(function(){ .reset(); });
2. 清空内容
$("#text_id").attr("value",'');
3.单选框
<span>性别:</span> <input id="sex" name="sex" type="radio" value="1"/> 男 <input id="sex" name="sex" type="radio" value="0"/> 女
3.1 回填赋值
$('[name="sex"]:radio').each(function() { if (this.value == 0) { this.checked = true; } });
3.2 获取单选按钮的值:
var valradio = $("input[@type=radio][@checked]").val();
3.3:获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();
3.4:设置value=2的项目为当前选中项:
$("input[@type=radio]").attr("checked",'2');
3.5:获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):
var item = $('input[@name=items][@checked]').val();
3.6:radio单选组的第二个元素为当前选中值:
$('input[@name=items]').get(1).checked = true;
4.多选框
4.1:得到多选框的值
var checkboxval = $("#checkbox_id").attr("value");
4.2:使其未勾选
$("#chk_id").attr("checked",'');
4.3 勾选
$("#chk_id").attr("checked",true);
3:判断是否已经选中
if($("#chk_id").attr('checked')==true) {
...
}
5. 下拉框
5.1:获取下拉列表的值
var selectval = $('#select_id').val();
5.2 设置value=test的项目为当前选中项:
$("#select_id").attr("value",'test');
5.3 添加下拉框的option:
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")
5.4:清空下拉框:
$("#select_id").empty();
6:获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
7:select下拉框的第二个元素为当前选中值:
$('#select_id')[0].selectedIndex = 1;
二、综合案例
1、级联选择1
//HTML <label for="name">级别:</label> <input type="radio" name="level" id="level" class="level"> 四级 <input type="radio" name="level" id="level" class="level"> 六级<br/> <label>所报班级:</label><br/> <select id="classType" name="classType" width="200px"> <option value=''>请选择班型</option> </select> //Javascript <script type="text/javascript"> $(function() { $(".level").click(function() { var typeValue = $(".level").index(this); if (typeValue == 0) { $("#classType").empty(); $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语四级VIP全程班</option>").appendTo("#classType"); } else { $("#classType").empty(); $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语六级VIP全程班</option>").appendTo("#classType"); } }); $(".level").click(); }); </script>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/17/fecef46f0efb0367a88912f5778d39ff.png)
2、级联选择2
//HTML 考试级别: <select id="type" class="cet" name="type"> <option value="0">全部</option> <option value="1">四级</option> <option value="2">六级</option> </select> <br> 所选班型: <select id="classType" class="cet" name="classType"></select> //javascript <script type="text/javascript"> $(document).ready(function() { $("#type").change(function() { $("#classType").empty(); var value = $(this).val(); if (value == 1) { $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语四级VIP全程班</option>").appendTo("#classType"); $("<option>大学英语四级精品全程班</option>").appendTo("#classType"); } else if (value == 2) { $("<option value=''>请选择班型</option>").appendTo("#classType"); $("<option>大学英语六级VIP全程班</option>").appendTo("#classType"); $("<option>大学英语六级精品全程班</option>").appendTo("#classType"); } }) }); </script>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/17/309adb82f3b95db2a705f0b037f40864.png)
2-1 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); }) }) })
在线调试 / 在线演示
3. [b]防止重复提交[/b]
多次递交表单对于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; } }); });
在线调试 / 在线演示
方案1 : 加在 按钮上
$("document").ready(function() { $("input:submit").each(function() { $(this).click(function() { setdisabled(this,true); return true; }); }); function setdisabled(obj) { setTimeout(function() { obj.disabled = true; }, 100); } })
特点: 点击按钮就执行,发生在 表单验证逻辑之前
将表单中的按钮禁用
下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据:
//禁用按钮: $("#somebutton").attr("disabled", true); //启动按钮: $("#submit-button").removeAttr("disabled");
可能大家往往会使用.attr(‘disabled',false);,不过这是不正确的调用
方案2:加在 form 上
$("document").ready(function() { $("#form1").submit(function(){ setdisabled($("#tj")); }); function setdisabled(obj) { setTimeout(function() { obj.disabled = true; }, 100); } })
特点: 发生在 表单验证逻辑之后 ,表单验证不通过,不会触发。推荐采用
方案 3:
$("document").ready(function() { $("#form1").submit(function() { $("#tj").attr("disabled","true"); }); })
如果上面方法都不灵就用这个
var flag_submit = false; $(document).ready(function() { $("#form1").submit(function() { if(flag_submit){ return false; } flag_submit = true; }); })
[b]输入内容后启用递交按钮[/b]
$('#username').keyup(function() { $('#submit').attr('disabled', !$('#username').val()); });
递交按钮只有在用户输入内容后才可以启动 在线调试 / 在线演示
4.改变文本框的获得焦点的样式
//添加一个类名为focus的样式 .focus {border: 1px solid #f00; background: #fcc; } $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); });
也可对标签高亮显示
$("form :input").focus(function() { $("label[for='" + this.id + "']").addClass("labelfocus"); }).blur(function() { $("label").removeClass("labelfocus"); });
在线调试 / 在线演示
5.复选框进行全选,反选,全不选操作
//全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked',true); }); //全不选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').attr('checked',false); }); //反选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked = !this.checked; })); //提交按钮 $("#send").click(function(){ var str = "你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str += $(this).val()+'\r\n'}) alert(str); );
6. 在表单中禁用“回车键”
$("#form").keypress(function(e) { if (e.which == 13) { return false; } });
7.清除所有的表单数据
可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。
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; }); };
相关文章推荐
- jQuery学习笔记— jQuery对表单、表格的操作以及更多应用
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
- 【JAVAWEB学习笔记】28_jquery加强:json数据结构、jquery的ajax操作和表单校验插件
- jQuery 学习笔记之八 (jQuery 表单操作)
- Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
- jQuery学习笔记之Dom操作
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
- learning jQuery 学习笔记九(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----操作属性
- jQuery学习笔记 - 4 表单隔行变色
- jQuery学习笔记 操作jQuery对象 文档处理
- jQuery学习笔记(七)JS 一些基本操作代码整理
- jQuery学习笔记之jQuery的DOM操作
- jquery.validate 学习笔记(验证form表单工具)
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)
- 前端学习笔记-jquery-14-表单元素选择器
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要) .
- JavaScript学习笔记8-jQuery表单对象属性过滤
- jQuery学习笔记_DOM操作
- jQuery学习笔记[1] jQuery中的DOM操作