用JavaScript获取表单里的值

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

starjuly

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

阅读量1k

点赞数

分类专栏： JavaWeb 文章标签： html javascript 初学Html 表单标签

本文链接：https://blog.csdn.net/starjuly/article/details/51891649

版权

JavaWeb 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

建立form表单里的标签：
  文本输入框，密码输入框，单选框，多选框，下拉框，文本域，隐藏域
  用JavaScript获取表单里的每一个值，
  将值显示出来。

填写数据

获取的值如下：

<html>
<head>
<title>2getValue.html</title>

<style type="text/css">
fieldset {
	margin: 10px auto;
	text-align: center;
	width: 50%;
}

label {
	margin-right: 8px;
}
</style>

<script type="text/javascript">
	function getValue() {

		//单选按钮的获取
		var sex = document.getElementsByName("sex"); //获得的是集合
		var s = "";
		for ( var i in sex) { //使用for循环遍历集合
			if (sex[i].checked == true) {
				s = sex[i].value;
			}
		}

		//多选按钮的获取
		var like = document.getElementsByName("hobby");
		var l = "";
		for ( var i in like) {
			if (like[i].checked == true)
				l += like[i].value; //因为是多选，所以将内容加上
			l += " ";
		}

		var name, password, location, introduce, hid; //定义变量
		//数据的获取
		name = document.getElementById("userName").value;
		password = document.getElementById("userPassword").value;
		location = document.getElementsByName("choose")[0].value;
		introduce = document.getElementsByName("area")[0].value;
		hid = document.getElementById("h").value;
		
		//显示数据
		document.write("姓名：" + name + "<br>");
		document.write("密码：" + password + "<br>");
		document.write("性别：" + s + "<br>");
		document.write("技能：" + l + "<br>");
		document.write("选择：" + location + "<br>");
		document.write("文本域：" + introduce + "<br>");
		document.write("隐藏数据：" + hid + "<br>");

	}

	/* 
		function choose(){
			 var location = document.getElementsByName("choose")[0].value;
			// alert(location);
		//	 document.write(loaction);
			
			/* 	 var lo = "";
				 for(var i in location){
				 	if(location[i].checked == true)
				 		lo = location[i].value;
				 } 
				 alert(lo); 
	} */

	/* 		function getRadio(){
	 var sex	=document.getElementsByName("sex");
	 var s;
	 for(var i in sex){
	 if(sex[i].checked == true){
	 s = sex[i].value;
	 }
	 } */

	//		getRadio();
</script>

</head>

<body>
	<fieldset>
		<legend>文本输入框</legend>
		<label>姓名：</label><input type="text" name="userName" id="userName">
	</fieldset>

	<fieldset>
		<legend>密码输入框</legend>
		密码：<input type="password" name="userPassword" id="userPassword">
	</fieldset>

	<fieldset>
		<legend>单选框</legend>
		性别： 男<input type="radio" name="sex" value="男" οnchange="getRadio()">
		女<input type="radio" name="sex" value="女" οnchange="getRadio()">
	</fieldset>

	<fieldset>
		<legend>多选框</legend>
		技能： Java<input type="checkbox" name="hobby" value="Java">
		Android<input type="checkbox" name="hobby" value="Android">
		UI<input type="checkbox" name="hobby" value="UI">
	</fieldset>

	<fieldset>
		<legend>下拉框</legend>
		地点：<select name="choose" οnchange="choose()">
			<option>请选择城市</option>
			<option value="北京">北京</option>
			<option value="广州">广州</option>
			<option value="深圳">深圳</option>
		</select>
	</fieldset>

	<fieldset>
		<legend>文本域</legend>
		个性签名：
		<textarea rows="5" cols="40" name="area">个性也是一种生活态度！！</textarea>
	</fieldset>

	<fieldset>
		<legend>隐藏域</legend>
		不会显示在页面的标签 <input type="hidden" name="hid" value="haha" id="h">
	</fieldset>

	<fieldset>
		<legend>点击看看</legend>
		<input type="button" value="获取数据" οnclick="getValue()">
	</fieldset>


</body>
</html>