Javascript操作表单实例讲解(下)


Posted in Javascript onJune 20, 2016

在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示:

一、文本域

<input type="text" />

-----------------------------
操作文本域的值
value 属性 设置或者获取值
-----------------------------

二、单选按钮和多选按钮

<input type="radio" />
<input type="checkbox" />

----------------------------------------------
checked 返回或设置单选的选中状态
true 选中 false 未选中

value 属性 获取选中的值,必须先判断选中状态

----------------------------------------------

example: 全选/全不选/反选

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构

<body>
<form name="myform" action="#" method="post" id="form1">
<script type="text/javascript">
for(var i=0;i<20;i++){
document.write("<input type='checkbox' name='nums' />"+(i+1)+"<br>" )
}
document.write("<input type='radio' name='radios'>全选");
document.write("<input type='radio' name='radios'>全不选");
document.write("<input type='radio' name='radios'>反选");
</script>
</form>
</body>

2.script脚本

2.1 采用调用函数的方式

<script type="text/javascript">
window.onload=function(){
var nums=document.getElementsByName("nums");
var radios=document.getElementsByName("radios");
fun(nums,i,radios);
function fun(a,b,c){
c[b].onclick=function(){
if(b==0){
for(var i=0;i<a.length;i++){
a[i].checked=true;
}
}else if(b==1){
for(var i=0;i<a.length;i++){
a[i].checked=false;
}
}else if(b==2){
for(var i=0;i<a.length;i++){
if(a[i].checked){
a[i].checked=false;
}else{
a[i].checked=true;
}
}
}
}
}
</script>

2.2 采用在比闭包中创建匿名函数的方式

<script type="text/javascript">
window.onload=function(){
var nums=document.getElementsByName("nums");
var radios=document.getElementsByName("radios");
for(var i=0;i<radios.length;i++){
(function(a){
radios[a].onclick=function(){
if(a==0){
for(var i=0;i<nums.length;i++){
nums[i].checked=true;
}
}else if(a==1){
for(var i=0;i<nums.length;i++){
nums[i].checked=false;
}
}else if(a==2){
for(var i=0;i<nums.length;i++){
if(nums[i].checked){
nums[i].checked=false;
}else{
nums[i].checked=true;
}
}
}
} 
})(i);
}
}
</script>

三、下拉框

<form name="myform">
<select name="sels">
<option>北京大学</option>
<option>长安大学</option>
<option>南京大学</option>
</select>
</form>

----------------------------------------

selected 设置或返回下拉框的选中状态

true 选中 false 未选中

selectedIndex 设置或返回下拉框选中的索引号

----------------------------------------

example1:选中长安大学

<script>
var sels=document.myform.sels;
//var sels=document.myform.sels.options;//(也可以)
sels[1].selected=true;
</script>

或者

<script>
var sels=document.myform.sels;
// var sels=document.myform.sels.options;//(也可以)
sels.selectedIndex=1;
</script>

example2:单价*数量=总价

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构

<body>
<form name="myform" action="#" method="post" id="form1">
单价:<input type="text" name="price" value="200">
<select name="count">数量
<option>1个</option>
<option>2个</option>
<option>3个</option>
</select>
总价:<input type="text" name="total" value="200">
</form>
</body>

2.script脚本

<script type="text/javascript">
window.onload=function(){
var price=document.myform.price;
var count=document.myform.count;
var total=document.myform.total;
count.onchange=function(){ 
total.value=parseInt(price.value)*(count.selectedIndex+1); 
}
} 
</script>

四、文本区域

<textarea name="info" rows="7" cols="60"></textarea>

----------------------------

value 返回或设置文本区域的值
----------------------------

example:动态检测文本区域中输入的字符长度

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构:

<body>
<div id="content">一共能输入20个字符,已输入0个,还能输入20个</div>
<form name="myform" action="#" method="post" id="form1">
<textarea name="info" cols="60" rows="7"></textarea>
</form>
</body>

2.script脚本:

<script type="text/javascript">
window.onload=function(){
var content=document.getElementById("content");
var info=document.myform.info;
info.onkeyup=info.onkeydown=function(){
var str=info.value;
var length=check(str);
var strs=20;
if (length<=strs) {
content.innerHTML="一共能输入"+strs+"个字符,已输入"+length+"个,还能输入"+(strs-length)+"个";
}else{
info.value=str.substring(0,strs);
} 
}
//检测中英文
function check(str){
var num=0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0 && str.charCodeAt(i)<=255){//英文
num++;
}else{//中文
num+=2;
}
}
return num;
}
}
</script>

五、表单验证

onsubmit 当表单提交的时候触发的事件

----------------------------------------------------------------------------------------------

<form name="myform" action="www.baidu.com" method="post" onsubmit="return check(this)"></form>
return false; //阻止表单默认行为

----------------------------------------------------------------------------------------------

六、submit方法

该方法用来实现自动提交

而事件onsubmit只能用来手动提交

以上所述是小编给大家介绍的Javascript操作表单实例讲解(下),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
用PHP代码给图片加水印
2015/07/01 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python之import机制详解
2014/07/03 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python实现飞机大战微信小游戏
2020/03/21 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
财产分割协议书范本
2014/11/03 职场文书
优秀党员推荐材料
2014/12/18 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server