Web前端——表单提交和Js添加选项

表单

表单提交

表单提交之后会将表单的数据以get或post方式,传送到action要打开的页面

方式1: 使用提交按钮

<form action="" method="get" onsubmit="return check()">
	用户名:<input type="text"><br>
	密码: <input type="password"><br>
	<input type="submit" value="登录"/>
</from>

方式2:使用js手动提交表单,this.form.submit() this可省略

<form action="" method="post" onsubmit="return check()">
	用户名:<input type="text"><br>
	密码: <input type="password"><br>
	<button type="button" onclick="this.form.submit">登录</button>
</from>

onsubmit="true" 为false,表单不可提交(点击提交按钮无效,不会跳转页面)

onsubmit="return check()";//在名为check的js方法中进行表单元素的验证(必填,用户名是否合法,密码等),返回true或false

表单添加选项

<form action="">
	<select name="city">
		<option value="1011">南宁</option>
		<option value ="1012">广州</option>
	</select>
</form>

使用js动态添加选项:

<form action="">
			<select id="province">
				<option value="">--请选择--</option>
			</select>
		</form>
		<script type="text/javascript">
		//json数据,可以直接定义使用
			var data = [{
				id: 100,
				name: '广东'
			}, {
				id: 101,
				name: '广西'
			}, {
				id: 102,
				name: '云南'
			}];
			var provinceEle = document.getElementById("province");
			for (let i = 0; i < data.length; i++) {
				//new Option() 参数为选项的内容,参数2为选项的value
				provinceEle.add(new Option(data[i].name, data[i].id));
			}
</script>

posted @ 2019-06-30 10:22  Stars-one  阅读(1659)  评论(0编辑  收藏