8月15作业

cqq00

已于 2022-08-15 18:15:01 修改

阅读量123

点赞数

分类专栏：小练习文章标签： html css 前端

于 2022-08-15 17:07:31 首次发布

本文链接：https://blog.csdn.net/cqq00/article/details/126350199

版权

小练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用jQuery获取表单元素在控制台输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			body {
				margin: 0px;
			}

			.main {
				width: 100%;
				font-family: "方正舒体";
			}

			.top {
				width: 100%;
				height: 20px;
				background-color: aliceblue;
			}

			.center {
				width: 100%;
				height: 20px;

			}

			.sp {
				height: 18px;
				font-size: 25px;
				margin-top: 3px;

			}

			.sp1 {
				border-bottom: 5px solid aqua;
			}

			.bottom {
				width: 100%;
				height: 600px;
				margin-top: 30px;
				margin-left: 50px;
				font-size: 20px;

			}

			input {

				margin-top: 20px;
				border-radius: 5px;

			}

			.inp {
				width: 300px;
				height: 20px;
				border: 2px solid aqua;
			}

			select {
				width: 120px;
				height: 30px;
				margin-top: 5px;
				border-radius: 5px;
				font-family: "方正舒体";
				border: 2px solid aqua;
			}

			textarea {
				margin-top: 15px;
				border-radius: 5px;
				border: 2px solid aqua;
			}

			button {
				width: 80px;
				height: 30px;
				margin-top: 15px;
				margin-left: 40px;
				background-color: aqua;
				border-radius: 3px;
				font-family: "方正舒体";
				font-size: 20px;
				border: 2px solid aqua;
			}

			button:hover {
				background-color: darkgrey;
				color: aqua;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					//获取每个输入的值
					var userName = $("input[name='userName']").val();
					var passWord = $("input[name='pwd']").val();
					var sex = $("input[name='sex']:checked").val();
					var hobbys = [];
					var arrys = $("input[name='hobby']:checked");
					for (var i = 0; i < arrys.length; i++) {
						hobbys[i] = $(arrys[i]).val();
					}
					var star = $("#star option:selected").val();
					var remark = $("#remark").val();
                    //声明变量存放值
					var con = {};

					con.userName = userName;
					con.passWord = passWord;
					con.sex = sex;
					con.hobby = hobbys;
					con.star = star;
					con.remark = remark;

					console.log(con);
				    return false;
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<span><b>位置：</b>首页 -> 表单</span>
			</div>
			<div class="center">
				<div class="sp">
					<span class="sp1"><b>注册信息</b></span>
				</div>
				<hr />
			</div>
			<div class="bottom">
				<form>
					账号:<input class="inp" type="text" name="userName" placeholder="请输入账号" /><br />
					密码:<input class="inp" type="password" name="pwd" placeholder="请输入密码" /><br />
					性别:<input type="radio" name="sex" value="male" />男
					<input type="radio" name="sex" value="female" />女<br />
					爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
					<input type="checkbox" name="hobby" value="football" />足球
					<input type="checkbox" name="hobby" value="dance" />跳舞<br />
					星座:<select name="star" id="star">

						<option value="白羊座">白羊座</option>
						<option value="巨蟹座">巨蟹座</option>
						<option value="狮子座">狮子座</option>
						<option value="处女座">处女座</option>
					</select><br />
					备注:<textarea id="remark" name="remark" rows="5" cols="50"></textarea><br />
					<button id="btn">注册</button>
				</form>
			
			</div>
		</div>
	</body>
</html>

在写完之后，没有错误在控制台却打印不出数据，但打一个断点之后又能打印数据，最后发现是要在获取数据打印之后返回一个false阻止数据在传回表单。