JS获取表单数据

最新推荐文章于 2024-11-16 03:03:42 发布

原创最新推荐文章于 2024-11-16 03:03:42 发布 · 719 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML创建表单并利用JavaScript进行数据获取的例子。通过两个表单实例展示了如何读取表单元素的值，并提供了简单的按钮点击事件触发数据读取的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<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);  
 }  
 function severCheck()  
 {  
     //取出id为“one”表单中所有的属性的数据  
    var form = document.getElementById("one2");  
	/*  var loginname = $("#userName").val(); 
	 alert (loginname);  */
	 
   var yonghuming = document.getElementById("userName").value; 
	 alert (yonghuming); 
    //one表单中第一个元素属性值  
    var content = form.elements(0).value;   
    alert(content); //user的值  
      
    //也可以直接通过元素的属性Id来直接获取  
    var age = document.getElementById("age").value;  
    alert("age : " + age);  

 }  
   
 </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" onclick="get()">  
     </form>  
     	<h>json添加用户</h>
     	<form action="index.jsp"  id="one2" method="post" name="one2">
	姓名：<input type="text" id="userName" name="userName">
	年龄：<input type="text" id="age" name="age">
	<input type="button" id="add" value="登录" onclick="severCheck();">
	</form>
     
 </body>  
 </html>