JavaScript对form表单内容进行操作

最新推荐文章于 2024-04-30 08:58:14 发布

QBjie

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107425184

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="ji" />
		<input type="button"  value="提交" onclick="d()"/>
		<input type="password" id="password"/>
		<input type="button"  value="提交" onclick="d1()"/>
		<textarea id="ta"></textarea>
		<input type="button"  value="提交" onclick="d2()"/>
		<input type="hidden" id="t"/>
		<input type="button"  value="提交" onclick="d3()"/>
		<script>
			/*文本框*/
			document.getElementById("ji").focus();
			function d(){
				var element = document.getElementById("ji");
				console.log(element.value) ;
				element.value = "jim";
				element.readOnly = true;
				element.disabled = true;
			}
			/*密码框*/
			document.getElementById("password").focus();
			function d1(){
				var element = document.getElementById("password");
				console.log(element.value) ;
				element.value = "hao";
				element.readOnly = true;/*只读，不可编辑，可以在Sevelet获取*/
				element.disabled = true;/*不可编辑，不可以在Sevelet获取*/
			}
			/*文本域*/
			document.getElementById("ta").focus();
			function d2(){
				var element = document.getElementById("ta");
				console.log(element.value) ;
				element.value = "hao";
				element.readOnly = true;
				element.disabled = true;
			}
			/*隐藏框，且没有focus()，与readOnly方法*/
			function d3(){
				var element = document.getElementById("t");
				console.log(element.value) ;
				element.value = "hao";
			}
		</script>
		<!--单选框-->
		<input type="radio" name="sex"  value="0"/>女
		<input type="radio" name="sex"  value="1"/>男
		<input type="button" value="提交" onclick="t1()"/>
		<script>
			function t1(){
				var elements = document.getElementsByName("sex");/*多个用复数，下同*/
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("sex")[1].checked = true;
			document.getElementsByName("sex")[0].disabled = true;
		</script>
		<!--复选框-->
		<input type="checkbox" name="hobby"  value="0"/>篮球
		<input type="checkbox" name="hobby"  value="1"/>足球
		<input type="checkbox" name="hobby"  value="2"/>乒乓球
		<input type="button" value="提交" onclick="t2()"/>
		<script>
			function t2(){
				var elements = document.getElementsByName("hobby");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("hobby")[1].checked = true;
			document.getElementsByName("hobby")[0].disabled = true;
		</script>
                <!--下拉框-->
		<select id="province">
			<option value="">--请选择--</option>
			<option value="1">河南省</option>
			<option value="2">河北省</option>
			<option value="3">湖北省</option>
		</select>
		<input type="button" value="提交" onclick="t3()"/>
		<script>
			function t3(){
				var element = document.getElementById("province");
				var options = element.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);
				}
			}
			document.getElementById("province").options[2].selected = true;
			document.getElementById("province").options[1].disabled = true;
		</script>
		</body>
</html>