js获取表单元素

dcoument对象的集合

A.all 所有元素的集合

alert(document.all)

B.forms 返回对文档中所有form对象的引用

alert(document.forms.length)

通过集合来访问相应的对象
1.通过下标的形式
2.通过name形式

下标
alert(document.forms[1].name)
name属性
alert(document.forms["myform1"].text1.value)

<form name="myform" id="form1">
 <input type="text" name="text1" value="张三">
 <input type="text" name="text2" value="李四">

</form>
<form name="myform1" id="form2">
 <input type="text" name="text1" value="张五">
 <input type="text" name="text2" value="李四">

</form>

C. anchors 返回对文档中所有anchors 对象的引用

D.images 返回对文档中所有image 对象的引用
F.links 返回对文档中所有area 对象和link对象的引用

一、获取表单

1.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.

<form name="tt" id="t"></form>
function checkform(id)
{
   var formlist = document.getElementById(id).childNodes;
   for(var i=0;i<formlist.length;i++)
    {
     alert(formlist[i].type)
     alert(formlist[i].value)
    }
}

2.element获取所有表单元素

表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name

window.onload=function(){
  var form=document.myform
  var element=form.elements
}
<body>
<form name="myform">
  <input type="text" name="username" value="baidu.com"><br>
  <input type="text" name="address" value="青岛"><br>
  <select name="kecheng">
    <option value="css" selected="">css</option>
    <option value="div">div</option>
  </select>
</form>
<input type="button" id="bt" value="查看效果"/>
</body>

var eles=document.myform.elements.length;
alert(eles)

var names=document.myform.elements[0].value;
var names=document.myform.elements["names"].value;
var names=document.myform.elements.names.value;

3.forms[1] 对所有form对象引用

	<script type="text/javascript">
		 function fun(){
			document.all[11].innerHTML = "你好" ;

			document.forms[1].username.value = "张无忌" ;

			document.images[2].src = "images/1.jpg" ;
		 }
	</script>
 <body onload = "fun()">
     <P></p>
	 <form method="post" action="">
		  姓名1:<input type="text" name="">
	 </form>
	 <form method="post" action="">
		  姓名2:<input type="text" name="username">
	 </form>
	 <form method="post" action="">
		  姓名3:<input type="text" name="">
	 </form>

	 <img src = "" alt = "aa"><img src = "" alt = "bb"><img src = "" alt = "cc">
 </body>

取出窗体中的所有表单的数量:document.forms.length

二、获取表单中的标签元素

1.文本域 : 操作文本域的值 value 属性，设置或者获取值

 var names=document.forms[0].elements.names.value="lisi";
alert(names)

2.单选按钮 : 返回或者设置单选的选中状态 true 选中，false 未选中。value 属性获取选中的值，必须先判断选中状态。

var sex=document.myform.sex;
	      sex[0].checked=true;
	     for (var i=0; i<sex.length; i++) {
		   if(sex[i].checked){
		     alert(sex[i].value)
		   }
	     }

3.多选按钮 : checked 返回或者设置单选的选中状态true 选中,false 未选中。value 属性获取选中的值，必须先判断选中状态。

var likes=document.forms.myform["like[]"];
	    likes[2].checked=true;
	  for (var i=0; i<likes.length; i++) {
	     if(likes[i].checked){
		   alert(likes[i].value);
		 }
	  }

4.selected 设置或返回下拉框的选中状态,true 选中,false 未选中。selectedIndex 设置或返回下拉框被选中的索引号

 var school=document.myform.school;
 var school=document.myform.school.options;
 alert(school.length)
 //selected设置选中状态
 school[1].selected=true;
 //selectedIndex设置选中状态
 school.selectedIndex=2;

<form id="form1" name="form1">
文本框 ：<input type="text" id="txt" value="txt" />
<br />
单选按钮：<input type="radio" value="男" name="sex" />男    <input type="radio" value="女" name="sex"  checked="checked"/>女
<br />
复选框：<input type="checkbox" value="1"  name="check[]"/>1<input type="checkbox" value="2" checked="checked"  name="check[]" />2<input type="checkbox" value="3" checked="checked"  name="check[]" />3
<br />   
下拉框：
<select id="sel" style="width: 100px">
<option value="yi">1</option>
<option value="er" selected="selected">2</option>
<option value="san">3</option>
</select>
<br />
<input type="button" value="获取"  onclick="getVal()"/>
</form>

<script type="text/javascript">
 
function getVal(){
    var str="";
    //获取单选按钮的值
    var radios = document.form1.sex;
    var n = radios.length;
    for (var i = 0; i < n; i++) {
        if (radios[i].checked) {
            str = " 单选 "+radios[i].value;
        }
    }
        //还有获取单选框的值有三种方式：
        $('input:radio:checked').val()；
        $("input[type='radio']:checked").val();
        $("input[name='sex']:checked").val();
 
    //获取复选框中选中的值的组合 1,2,3,4
    var checkboxs = document.getElementsByName('check[]');
    var n = checkboxs.length;
    for (var i = 0; i < n; i++) {
        if (checkboxs[i].checked) {
            str += " 复选框 "+checkboxs[i].value;
        }
    }
    //获取下拉列表的选中项的值
    //方法一：
    str += " 列表 一："+document.getElementById("sel").value;
 
    //方法二：
    var sel = document.getElementById("sel");
    str += " 列表 二："+sel.options[sel.selectedIndex].value;
    alert(str);
 
}
</script>

三、表单校验

1.onsubmit 当表单提交的时候触发的事件
2.onblur
3. onfocus
4.onchange

非空

<script>
  function check (obj) {
    if(obj.names.value==""){
	  alert("姓名不能为空");
	  return false;
	}
	if(obj.age.value==""){
	 alert("年龄不能为空");
	  return false;
	 }
     var statu=0;
	 for (var i=0; i<obj.sex.length; i++) {
	  if(obj.sex[i].checked){
	    statu=1;
	  }
	 }
	 if(!statu){
	   alert("性别不能为空");
	   return false; //阻止事件的默认行为(适用于所有事件)
	 }
  }
</script>

<form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)">
   性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
</form>

四、表单提交

<script>
  window.onload=function  () {
    var subs=document.myform.subs;
	 subs.onclick=function  () {
	  document.myform.action="1.html";
      document.myform.submit();
	}

	setTimeout(function  () {
	   document.myform.action="2.html";
      document.myform.submit();
	},4000)
  }
</script>

<form name="myform" action="" method="post">
<input type="text" name="names">
<input type="button" value="提交" name="subs">
</form>

猜你喜欢