JavaScript 基础表单提交接受参数并弹出（获取form的几种方法 表单控件 推荐写法 延迟提交）

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>函数接收参数并弹出</title>

<script>
window.onload=function(){
	/* 获取form的几种方法 */
	//var fm=document.getElementById('myForm');
	//var fm = document.getElementsByTagName("form")[0];
	//var fm=document.forms[0];
	//console.log(fm)			//<form id="myForm" name="youForm">
	//alert(fm)					//全部返回[object HTMLFormElement]
	
	
	/* 表单控件 */
	var fm=document.getElementById('myForm');	
	//alert(fm.elements)；					//表单控件集合,HTMLCollection
	//console.log(fm.elemets);				//undefined
	//alert(fm.length);						//4，向下兼容,不推荐
	//console.log(fm.length);				//4	
	//alert(fm[0])							//[object HTMLInputElement]向下兼容,不推荐
	///console.log(fm[0])					//<input name="name" type="text" value="weicunbin">
	
	//alert(fm.elements.length)				//推荐此种写法
	//console.log(fm.elements.length)
	//alert(fm.elements[0]);				//[object HTMLInputElement]
	//console.log(fm.elements[0]);			//<input name="name" type="text" value="weicunbin">
	//alert(fm.elements["name"]);			//[object HTMLInputElement],当name的值唯一时
	
	//var sexList=fm.elements["sex"];		//【object RadioNodeList】,当name的值不唯一时		
	//alert(sexList[0]);					//[object HTMLInputElement]
	//alert(sexList[0].value);				//学校
	//alert(sexList[0].defaultValue)		//获取最初的value值
	//alert(sexList[0].name);				//sex
	//sexList[1].disabled=true				//禁用

		
		
	/* 模拟延迟 每三秒自动提交*/
	// var fm=document.getElementById('myForm');
	// setTimeout(function() {
	// 	fm.submit()
	// }, 3000);
	
	var oBtn0 = document.getElementsByTagName("input")[0];
	var oBtn1 = document.getElementsByTagName("input")[1];	
	document.getElementById("oClick").addEventListener("click", function(){
		alert("姓名：  "+oBtn0.value+"\n学校：  "+oBtn1.value)	
	});
}
</script>
	</head>
	<body>
		<!-- 以input中的name值  =  input中的value值方式输出，以&隔开  ?name=weicunbin&sex=男 -->
		<form name="youForm" id="myForm">
			<!-- 默认get提交,普通按钮不能提交； -->
			<p>姓名：<input name="name" type="text" value="weicunbin" /></p>
			<p>学校：<input name="sex" type="text" value="学校" /></p>
			<p>性别：<input name="sex" type="radio" value="男" /></p>
			<p><button id="oClick">其他方式提交，点击弹出内容</button></p>
			<p><input type="submit" value="submit方式提交" id="sub" /></p>
			<!-- PS：不加form的话，将submit当做一个按钮，不会触发submit事件，可以理解为submit是绑定到form -->
		</form>

	</body>
</html>
posted @ 2022-04-02 09:48  coderwcb  阅读(389)  评论(0)    收藏  举报