欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

jquery中如何获取表单元素-知了汇智

jquery中如何获取表单元素

  dcoument表单文本对象的集合
  all[] 对所有html元素的访问
  forms 返回对文档中所有form对象的引用
  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>
  通过集合来访问相应的对象
  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>
  3. anchors 返回对文档中所有anchors 对象的引用
  4.images 返回对文档中所有image 对象的引用
  5.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>

jquery中如何获取表单元素
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)
  文本域回显
 <p style="margin-top: -22px; padding-left: 40px;">
 <input type="text" name="matainReasonRemark" class="long"/></p>
 
	$.ajax({
     type : "POST",
     url : uxl,
     data : param,
     success : function(list) {
            var matainReasonRemark= obj.data.MATAIN_REASON_REAMRK;
            $("input[name='matainReasonRemark']").val(matainReasonRemark);
     	});
     },
     error : function(data) {
          
     },
 });

  三、表单校验

  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>

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用
132 2811 3191
预约免费试学
点击咨询
预约试学