js获取表单数据

最新推荐文章于 2024-01-22 16:22:38 发布

黑夜中的一点慰藉

最新推荐文章于 2024-01-22 16:22:38 发布

阅读量4.6w

点赞数 4

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/wangwuyilove/article/details/8805973

版权

javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

最近用到好多问题都是js的问题，以前学习js的时候没有学好，好多方法都记得不是很清楚了，写一写把知识点复习一下。

在页面获取表单（div）的数据，js封装了好多方法，有getELementById(id)、getElementsByName(name)、getElementByTagName(tagname)等等。

1、先来说下getElementById（id）这个方法，这个方法是特别常用的，看的id就应该想到他是唯一的，呵呵，js也是这样封装的getElementById(id)返回的就是一个数值。

看一下例子：

 <script type="text/javascript">
  
  function get()
  {
     //取出id为“one”表单中所有的属性的数据
     var form = document.getElementById("one");
     //one表单中第一个元素属性值
     var content = form.elements(0).value; 
     alert(content); //user的值
     
     //也可以直接通过元素的属性Id来直接获取
     var pass = document.getElementById("username").value;
     alert("pass : " + pass);
     var ipv6 = document.getElementById("ipv6").value;
     alert(ipv6);
  }
  
  </script>
  
  <body>
    <form action="hehe.jsp" id="one" method="post" name="one1" >
      user : <input type="text"   id="username" name="user"  value="" /><br>
      pass : <input type="text"   id="password" name="pawd"  value="" /><br>
      ipv6 : <input type="text"   id="ipv6" name="ipv6"  value="" /><br>
      vlan : <input type="text"   id="vlan" name="vlan" value="" /><br>
      <input type="button" value = "button" οnclick="get()">
      </form>
  </body>

值得注意的getElementById这个方法查找的时候，会以传入的参数与第一次name属性值相同的元素查找出来，

 <script type="text/javascript">
  
  function get()
  {
     //也可以直接通过元素的属性Id来直接获取
     var ipv6 = document.getElementById("ip").value;
     alert("ipv6: " + ipv6); //55::66
     
     var ipv4 = document.getElementById("ip").value;
     alert("ipv4: "+ipv4);  //55::66
     
     var ipv44 = document.getElementById("ipv4").value;
     alert(ipv44);       //1.1.1.1
  }
  
  </script>
  
  <body>
    <form action="hehe.jsp" id="one" method="post" name="one1" >
      ipv6 : <input type="text"   name="ip"  value="55::66" /><br>
      ipv4 : <input type="text"   id="ip" name="ipv4" value="1.1.1.1" /><br>
      <input type="button" value = "button" οnclick="get()">
      </form>
  </body>

js在这方面很灵活，同时也会给我们带来一些想不到的麻烦，这就要求我们写代码的时候要严谨。

2、getElementsByName（name），name这个属性在元素中是可以相同的也就是这个方法取出的是个集合。

注意方法名，我老是写错少了“s”，这个方法与getElementById不太一样。

 <script type="text/javascript">
  
  function get()
  {
     //也可以直接通过元素的属性name来直接获取
     var ip = document.getElementsByName("ip");
     var ipv6 = ip[0].value;
     alert("ipv6: " + ipv6); //55::66
     
     var ipv4 = ip[1].value;
     alert("ipv4: "+ipv4);  //1.1.1.1
     
  }
  
  </script>
  
  <body>
    <form action="hehe.jsp" id="one" method="post" name="one1" >
      ipv6 : <input type="text"   id="ipv6" name="ip" value="55::66" /><br>
      ipv4 : <input type="text"   id="ipv4" name="ip" value="1.1.1.1" /><br>
      <input type="button" value = "button" οnclick="get()">
      </form>
  </body>

3、getElementByTagName（tagname），根据元素来查询，返回的值肯定也是集合啦！

 <script type="text/javascript">
  
  function get()
  {
     //也可以直接通过元素的属性tagname来直接获取
     var ip = document.getElementsByTagName("input");
     for(var i=0;i<ip.length;i++)
     {
        alert(ip[i].value); //55::66  1.1.1.1  button
     }
  }
  
  </script>
  
  <body>
    <form action="hehe.jsp" id="one" method="post" name="one1" >
      ipv6 : <input type="text"   id="ipv6" name="ip" value="55::66" /><br>
      ipv4 : <input type="text"   id="ipv4" name="ip" value="1.1.1.1" /><br>
      <input type="button" value = "button" οnclick="get()">
      </form>
  </body>

黑夜中的一点慰藉

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
js获取表单数据

最近用到好多问题都是js的问题，以前学习js的时候没有学好，好多方法都记得不是很清楚了，写一写把知识点复习一下。在页面获取表单（div）的数据，js封装了好多方法，有getELementById(id)、getElementsByName(name)、getElementByTagName(tagname)等等。 1、先来说下getElementById（id）这个方法，这个方法是特别
复制链接

扫一扫