js表单操作
2016-07-25 10:10
344 查看
name 很重要:
在DOM中可以直接通过 表单.表单元素的name值来获取表单元素
例:<form id ="form1">
<input type="text" name="text1" value="文本"/>
</form>
js:
var oForm=document.getElementById('form1');
alert(oForm.text1.value);//弹出“文本”
onchange:当值发生改变的时候触发
text:当光标离开的时候,如果内容有变化就触发
radio/checkbox:标准下点击的时候只要值变了那么就会触发,非标准下焦点离开的时候如果值变了就会触发
select:
例:<form id ="form1">
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</form>
js: var oForm=document.getElementById('form1');
oForm.sex[0].onchange=function(){
alert("改变了")
}
当name值选中的是一组值,表单.表单元素的name值是一个集合,需要通过下标来选择元素
<select name="city" value="">//value 的值为option中由selected属性的那个值
<option value="">请选择城市</option>
<option value="上海">上海</option>
<option value="北京" selected>北京</option>
</select>
js: oForm.city.onchange=function(){
alert(oForm.city.value);//弹出“北京”
}
onsubmit()方法 提交表单
<form id ="form1">
<input type="text" name="text1"/>
<input type="submit" name="dosubmit" value="提交"/>
<input type="reset" name="doreset" value="重置"/>
</form>
js:var oForm=document.getElementById("form1");
oForm.onsubmit=function(){
if(this.text1.value==''){
alert("请输入内容");
return false;//不会被提交
}
}
onreset:事件 当提交表单重置的时候触发,注意重置不是清空,只是返回到上一次重置前的状态之前没有重置的话回到最初状态
oForm.onreset=function(){
var re=confirm('确定要重置吗?');//确认会返回true,取消返回false
return re;
}
在DOM中可以直接通过 表单.表单元素的name值来获取表单元素
例:<form id ="form1">
<input type="text" name="text1" value="文本"/>
</form>
js:
var oForm=document.getElementById('form1');
alert(oForm.text1.value);//弹出“文本”
onchange:当值发生改变的时候触发
text:当光标离开的时候,如果内容有变化就触发
radio/checkbox:标准下点击的时候只要值变了那么就会触发,非标准下焦点离开的时候如果值变了就会触发
select:
例:<form id ="form1">
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</form>
js: var oForm=document.getElementById('form1');
oForm.sex[0].onchange=function(){
alert("改变了")
}
当name值选中的是一组值,表单.表单元素的name值是一个集合,需要通过下标来选择元素
<select name="city" value="">//value 的值为option中由selected属性的那个值
<option value="">请选择城市</option>
<option value="上海">上海</option>
<option value="北京" selected>北京</option>
</select>
js: oForm.city.onchange=function(){
alert(oForm.city.value);//弹出“北京”
}
onsubmit()方法 提交表单
<form id ="form1">
<input type="text" name="text1"/>
<input type="submit" name="dosubmit" value="提交"/>
<input type="reset" name="doreset" value="重置"/>
</form>
js:var oForm=document.getElementById("form1");
oForm.onsubmit=function(){
if(this.text1.value==''){
alert("请输入内容");
return false;//不会被提交
}
}
onreset:事件 当提交表单重置的时候触发,注意重置不是清空,只是返回到上一次重置前的状态之前没有重置的话回到最初状态
oForm.onreset=function(){
var re=confirm('确定要重置吗?');//确认会返回true,取消返回false
return re;
}
相关文章推荐
- angular.js学习之三ajax请求得不到数据
- JS仿百度自动下拉框模糊匹配提示
- JS本地刷新返回上一页代码
- 基于ActiveX 在B/S模式如何在js中查找读取本地文件及文件夹
- js 选项卡举例
- D3.js 饼状图的制作
- js封装包
- js获取select标签选中的值
- 160722、Javascript函数节流
- JS日期插件:My97DatePicker
- 如何利用POST数据到web页面接口(包括调用页面发送json数据和页面后台接受json数据)
- **JSON** JSON简介
- javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
- 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
- JS中showModalDialog 详细使用
- [JS]Mac系统下SublimeText运行JavaScript控制台——纯JavaScript开发环境
- JavaScript 打开远程 JS 文件
- Javascript模块化编程(三):require.js的用法
- Javascript模块化编程(二):AMD规范
- Javascript模块化编程(一):模块的写法