8月15日作业：使用jquery获取表单数据，在控制台打印结果

洛璃依

已于 2022-08-15 17:11:10 修改

阅读量276

点赞数

分类专栏： HTML作业（huaqing）文章标签： jquery 前端

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

本文链接：https://blog.csdn.net/m0_58831419/article/details/126350167

版权

HTML作业（huaqing）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML代码（body）：

	<body>
		<div class="top">
			<span>位置：</span>
			<ul class="topul">
				<li>首页</li>
				<li>--></li>
				<li>表单</li>
			</ul>
		</div>
		<div class="main">
			<div class="main_title">
				<span>注册信息</span>
			</div>
		
		<form>
			<div class="main_body">
				<ul>
					<li>
						<label for="userName">账号：</label>
						<input type="text" id="userName" name="userName" placeholder="请输入账号">
					</li>
					<li>
						<label for="pwd">密码：</label>
						<input type="password" name="pwd" id="pwd" autocomplete="off" placeholder="请输入密码">
					</li>
					<li>
						<label>性别：</label>
						<input type="radio"  name="sex" value="male" checked>男
						<input type="radio"  name="sex" value="female">女
					</li>
					<li>
						<label>爱好：</label>
						<input type="checkbox"  name="hobby" value="sing" >唱歌
						<input type="checkbox"  name="hobby" value="dance">跳舞
						<input type="checkbox"  name="hobby" value="football">足球
					</li>
					<li>
						<label>星座：</label>
						<select name="star" id="star">
							<option value="1">白羊座</option>
							<option value="2">狮子座</option>
							<option value="3">巨蟹座</option>
							<option value="4" selected>射手座</option>
						</select>
					</li>
					<li>
						<label>备注：</label>
						<textarea name="remark" id="remark" placeholder="必填"></textarea>
					</li>
					<li>
						<label>&nbsp;</label>
						<button id="btn" name="submit">注&nbsp;册</button>
					</li>
				</ul>
			</div>
			</form>
			<p id="result"></p>
			</div>
	</body>

HTML代码（jQuery）：

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/homework_1.css">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn").click(function(){
					var userName = $("input[name='userName']").val();
					var pwd = $("input[name='pwd']").val();
					var sex = $("input[type='radio']:checked").val();
					var hobbys = [];
					var hobbyArrs = $("input[name='hobby']:checked");
					for(var i=0;i<hobbyArrs.length;i++){
						hobbys[i] = $(hobbyArrs[i]).val();
					}
					var star = $("#star option:selected").val();
					var remark = $("#remark").val();
					
					var res = {};
					res.userName=userName;
					res.pwd = pwd;
					res.sex = sex;
					res.hobby = hobbys;
					res.star = star;
					res.remark = remark;
					
					console.log(res);
					$("#result").html(JSON.stringify(res));
					return false;
				})
			});
		</script>
	</head>

HTML代码（css）：

body{
	margin: 0px;
	font-size: 15px;
	font-family: "楷体";
}
.top{
	width: 95%;
	height: 40px;
	background-color: azure;
	border: 0px solid red;
	position: relative;
}
.top span{
	font-weight: bold;
	float: left;
	line-height: 40px;
	margin-left: 8px;
}
.topul{
	list-style: none;
	margin: 0px;
}
.topul li{
	float: left;
	line-height: 40px;
	margin-left: 5px;
	margin-right: 3px;
}

            .main {
				margin: 10px 18px;
				/* 上下为10px,左右18px */
			} 

			.main_title {
				height: 30px;
				margin-top: 10px;
				margin-bottom: 20px;
				border-bottom: 1px solid #0ff;
				/* 给"注册信息"设置下框线 */
				position: relative;
			}

			.main_title span {
				/* 给"注册信息"设置属性" */
				font-weight: bolder;
				/* 设置字体加粗 */
				border-bottom: 3px solid
					/* #00FFFF;给"注册信息"设置短蓝色下划线 */
					line-height: 30px;
				position: absolute;
				bottom: 1px;
			} 
			
.main_body ul li{
	margin-bottom: 20px;
	position: relative;
	list-style: none;
}
label{
	width: 80px;
	border:0px solid red;
	display: inline-block;
	line-height: 28px;
	text-align: center;
	float: left;
}
input[name="userName"],input[name="pwd"]{
	width: 300px;
	line-height: 28px;
	border-radius: 5px;
	border:1px solid #a9a9a9;
}
select{
	width:160px;
	height: 28px;
	border-radius: 5px;
	border: 1px solid #a9a9a9;
}
textarea{
	width: 400px;
	height: 100px;
	border-radius: 5px;
	border: 1px solid #a9a9a9;
}
#btn{
	width: 100px;
	text-align: center;
	line-height: 28px;
	background-color: darkturquoise;
	border: 0px solid white;
	color: white;
	border-radius: 5px;
}
input[type="radio"],input[type="checkbox"]{
	margin-top: 10px;
}

总结：使用jQuery实现功能比JavaScript更快捷简单，jQuery在JavaScript的基础上封装的许多好用的功能。

注意事项：语句体后面要加上 "return false;" 来禁止表单数据上传到表单上，否则控制台不会得到数据。