目录
-
获取表单
1.document.表单名称
2.document.getElementById(表单 id);
3.document.forms[表单名称]
4.document.forms[索引];//从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取表单</title>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
</form>
<form id="form2" name="form2" method="get" action="">
</form>
</body>
<script type="text/javascript">
//1.document.表单名称
var form1=document.form1;
console.log(form1);
//2.document.getElementById(表单 id);
var form2=document.getElementById("form2");
console.log(form2);
//得到当前文档中的表单集合
var forms=document.forms;
console.log(forms);
//3.document.forms[表单名称]
var form3=forms['form1'];
console.log(form3);
//4.document.forms[索引];//从0开始
var form4=forms[0];
console.log(form4);
</script>
</html>
-
获取input元素
1.通过 id 获取：document.getElementById(元素 id);
2.通过 form.名称 形式获取：myform.元素名称； name属性值
3.通过 name 获取：document.getElementsByName(name属性值)[索引]//从0开始
4.通过 tagName 数组：document.getElementsTagName('input')[索引]//从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取input元素</title>
</head>
<body>
<form id="myform" name="myform" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隐藏域"/>
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt()">获取元素内容</button>
</form>
</body>
<script type="text/javascript">
function getTxt(){
//1.通过 id 获取：document.getElementById(元素 id);
var uname=document.getElementById("uname").value;
console.log(uname);
//2.通过 form.名称 形式获取：myform.元素名称； name属性值
var myform=document.getElementById("myform");
var upwd=myform.upwd.value;
console.log(upwd);
//3.通过 name 获取：document.getElementsByName(name属性值)[索引]//从0开始
var uno=document.getElementsByName("uno")[0].value;
console.log(uno);
//4.通过 tagName 数组：document.getElementsTagName('input')[索引]//从0开始
var intro =document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</script>
</html>
-
获取单选按钮
(1)获取单选按钮组
document.getElementsByName("name属性值");
(2)遍历每个单选按钮，并查看按钮元素的checked属性历每个单选按钮，并查看按钮元素的checked属性
选中状态 checked='checked' checked checked=true
未选中状态 未设置checked属性或checked=false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取单选按钮</title>
</head>
<body>
<input type="radio" name="rad" value="1" />1
<input type="radio" name="rad" value="2" />2
<button type="button" onclick="getRadio()">获取</button>
</body>
<script type="text/javascript">
function getRadio(){
//(1)获取单选按钮组
var radios=document.getElementsByName("rad");
//(2)遍历每个单选按钮，并查看按钮元素的checked属性
for(var i=0;i<radios.length;i++){
console.log(radios[i].checked);
if(radios[i].checked){
console.log(radios[i].value);
}
}
}
</script>
</html>
-
获取多选按钮
(1)获取多选按钮组
document.getElementsByName("name属性值");
(2)遍历每个多选按钮，并查看按钮元素的checked属性历每个单选按钮，并查看按钮元素的checked属性
选中状态 checked='checked' checked checked=true
未选中状态 未设置checked属性或checked=false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取多选按钮</title>
</head>
<body>
<input type="checkbox" name="hobby" value="sing" />唱歌
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="rap" />说唱
<button type="button" onclick="getCheckbox()">获取</button>
</body>
<script type="text/javascript">
function getCheckbox(){
//(1)获取多选按钮组
var checkboxs=document.getElementsByName("hobby");
var str='';
//(2)遍历每个多选按钮，并查看按钮元素的checked属性
for(var i=0;i<checkboxs.length;i++){
//如果被选中，则获取相应的值
if(checkboxs[i].checked){
str+=checkboxs[i].value+',';
}
}
//通过截取，去除最后一个多余的逗号
str=str.substring(0,str.length-1);
console.log(str);
}
</script>
</html>
-
获取下拉选项
1.获取下拉框(id属性、name属性值、class属性值、元素)
2.获取下拉框的所有下拉选项
下拉框对象.options
3.获取下拉框被选中项的索引
下拉框对象.selectedindex
4.获取被选中项的值
注意：当通过options获取选中项的value属性时，
若没有value属性，则获取option标签的内容
若存在value属性，则获取value属性的值
5.获取被选中的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取下拉选项</title>
</head>
<body>
来自：
<select name="uform" id="uform">
<option value="-1">请选择</option>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option >深圳</option>
</select><br />
<button type="button" id="sub">获取</button>
</body>
<script type="text/javascript">
document.getElementById("sub").onclick=function(){
//1.获取下拉框(id属性、name属性值、class属性值、元素)
var uform=document.getElementById("uform");
//2.获取下拉框的所有下拉选项
var selectoptions=uform.options;
console.log(selectoptions);
//3.获取下拉框被选中项的索引
var index=uform.selectedIndex;
console.log(index);
//4.获取被选中项的值
var val=selectoptions[index].value;
console.log(val);
//5.获取被选中的文本
var txt=selectoptions[index].text;
console.log(txt);
//获取当前被选中的值(推荐)
var selectvalue=uform.value;
console.log(selectvalue);
//设置下拉选项被选中
selectoptions[2].selected=true;
}
</script>
</html>
-
提交表单
(1)使用普通button按钮+onclick事件+事件中编写代码：
获取表单.submit();
(2)使用submit按钮+οnclick="return 函数()"+函数编写代码：
最后必须返回：return true|false;
(3)使用submit按钮/图片提交按钮+表单οnsubmit="return 函数()"+函数编写代码：
最后必须返回：return true|false;
trim()
去除字符串前后空格（不去除字符串中间的空格）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<body>
<form id="myform1" name="myform2" action="http://www.baidu.com" method="get" >
姓名：<input name="test" id="uname" />
<input type="button" value="提交表单" onclick="submitForm()"/>
</form>
<hr />
<form id="myform2" action="http://www.baidu.com" method="get" >
姓名：<input name="test" id="uname2" />
<input type="submit" value="提交表单" onclick=" return submitForm2()"/>
</form>
<hr />
<form id="myform2" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">
姓名：<input name="test" id="uname3" />
<input type="submit" value="提交表单"/>
</form>
</body>
<script type="text/javascript">
//(1)使用普通button按钮+onclick事件+事件中编写代码：
// 获取表单.submit();
function submitForm(){
//获取姓名文本框的值
var uname=document.getElementById("uname").value;
if(uname==null||uname.trim()==""){
//结束
return;
}
//提交表单
document.getElementById("myform1").submit();
}
//(2)使用submit按钮+onclick="return 函数()"+函数编写代码：
// 最后必须返回：return true|false;
function submitForm2(){
//获取姓名文本框的值
var uname=document.getElementById("uname2").value;
if(uname==null||uname.trim()==""){
//结束
return false;
}
//提交表单
return true;
}
//(3)使用submit按钮/图片提交按钮+表单onsubmit="return 函数()"+函数编写代码：
// 最后必须返回：return true|false;
function submitForm3(){
//获取姓名文本框的值
var uname=document.getElementById("uname3").value;
if(uname==null||uname.trim()==""){
//结束
return false;
}
//提交表单
return true;
}
</script>
</html>
-
表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
</head>
<body>
<form id="myform" name="myform">
姓名:<input type="text" id="uname" name="uname"/><br />
密码:<input type="password" id="upwd" name="upwd"/><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得<br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
<div id="validate" style="color: red;"></div>
<button type="button" onclick="checkForm()">提交</button>
<button type="reset" onclick="resetForm()">重置</button>
</form>
</body>
<script type="text/javascript">
//通过id参数，返回dom对象
function $(id){
return document.getElementById(id);
}
//重置表单
function resetForm(){
$("myform").reset;
}
function checkForm(){
//获取用户名
var uname=$("uname").value;
if(isEmpty(uname)){
//通过innerHTML赋值
$("validate").innerHTML='用户名不能为空';
return;
}
if(uname.length<6||uname.length>12){
$("validate").innerHTML='用户名长度在6~12之间';
return;
}
//获取密码
var upwd=$("upwd").value;
if(isEmpty(upwd)){
//通过innerHTML赋值
$("validate").innerHTML='密码不能为空';
return;
}
if(upwd.length<6||upwd.length>12){
$("validate").innerHTML='密码长度在6~12之间';
return;
}
if(upwd.indexOf(uname)>0){
$("validate").innerHTML='密码中不能包含用户名';
return;
}
//获取年龄
var ages=document.getElementsByName("uage");
//第二个单选框是否被选中
var cked=ages[1].checked;
if(!cked){
$("validate").innerHTML='年龄必须选择你懂得！';
return;
}
//获取爱好
var ufavs=document.getElementsByName("ufav");
var favs='';
//遍历
for(var i=0;i<ufavs.length;i++){
if(ufavs[i].checked){
favs+=ufavs[i].value+',';
}
}
//判断是否选中
if(isEmpty(favs)){
$("validate").innerHTML='必须选择一项爱好！';
return;
}
favs=favs.substring(0,favs.length);
//获取下拉框
var city=$("ufrom").value;
if(city==-1){
$("validate").innerHTML='请选择你的城市！';
return;
}
$("validate").innerHTML='';
//设置表单提交的地址
$("myform").action="http://www.baidu.com";
//提交表单
$("myform").submit();
}
//判断字符串是否为空
//空返回true，不空返回false
function isEmpty(str){
if(str==null||str.trim()==""){
return true;
}
return false;
}
</script>
</html>
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
