jquery获取表单数据，在控制台打印结果

最新推荐文章于 2022-08-15 18:55:13 发布

qq_42788862

最新推荐文章于 2022-08-15 18:55:13 发布

阅读量165

点赞数 1

本文链接：https://blog.csdn.net/qq_42788862/article/details/126352100

版权

使用jQuery获取表单的数据，并封装成json数据，然后再打印出来。

效果图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>TestDemo</title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.top {
				height: 40px;
				background-color: azure;
				position: relative;
			}

			.top span {
				float: left;
				line-height: 40px;
				margin-left: 12px;
				font-weight: bold;
			}

			.topul {
				margin: 0px;
				position: relative;
			}

			.topul li {
				float: left;
				list-style: none;
				line-height: 40px;
				margin-left: 7px;
				margin-right: 3px;
			}

			.main {
				margin: 10px 18px;
			}

			.main_title {
				border-bottom: 1px solid darkgray;
				margin-bottom: 28px;
				position: relative;
				height: 35px;
			}

			.main_title span {
				line-height: 30px;
				border-bottom: 3px solid aqua;
				font-weight: bold;
				font-size: 14px;
				position: absolute;
				bottom: -1px;
				padding: 0px 2px;
				height: 30px;
			}

			.main_ul {
				list-style: none;
			}

			.main_ul li {
				margin-bottom: 20px;
			}

			.main_ul li lable {
				width: 80px;
				display: inline-block;
				float: left;
				line-height: 30px;
				text-align: center;
			}

			.content_input {
				width: 340px;
				height: 30px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}

			textarea {
				width: 500px;
				height: 100px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}

			#sex {
				margin-top: 8px;
			}

			#hobby {
				margin-top: 8px;
			}

			#star {
				width: 160px;
				height: 30px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}

			.submit {
				background-color: darkturquoise;
				font-size: 14px;
				color: #ffffff;
				border: 0px;
				font-weight: bold;
				width: 100px;
				height: 30px;
				border-radius: 5%;
			}
		</style>
	</head>
	<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>
			<div class="main_body">
				<ul class="main_ul">
					<li><label>账号</label> <input type="text" id="userName" name="userName" class="content_input"
							placeholder="请输入账号" /> </li>
					<li><label>密码</label> <input type="password" id="pwd" name="pwd" class="content_input"
							type="password" id="pwd" name="pwd" class="content_input" placeholder="请输入密码" /> </li>
					<li><label>性别</label> <input type="radio" id="sex" name="sex" value="男" checked />男
						&nbsp;&nbsp;&nbsp; <input type="radio" id="sex" name="sex" value="女" />女 </li>
					<li><label>爱好</label> <input type="checkbox" id="hobby" name="hobby" value="唱歌" />唱歌
						&nbsp;&nbsp;&nbsp; <input type="checkbox" id="hobby" name="hobby" value="跳舞" />跳
						舞&nbsp;&nbsp;&nbsp; <input type="checkbox" id="hobby" name="hobby" value="足球" /> 足球 </li>
					<li><label>星座</label> <select id="star" name="star">
							<option value="1">白羊座</option>
							<option value="2">水瓶座</option>
							<option value="3">巨蟹座</option>
						</select> </li>
					<li><label style="float: left;">备注</label> <textarea id="remark" name="remark"></textarea> </li>
					<li><label>&nbsp;</label> <input type="button" name="submit" id="submit"  class="submit" value="注 册" />&nbsp;
					<label>&nbsp;</label> <input type="button" name="submit" id="submit1" class="submit"   value="获 取" /> </li>
		
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	$("#submit1").click(function(){
		var username = $("#userName").val();
		var password = $("#pwd").val();
		var sex;
		$("input[name = 'sex']:checked").each(function(){
		sex = $(this).val()	
		
		});
		var i=0
		var hobby=[];
		$("input[name='hobby']:checked").each(function(){
		    hobby[i]=$(this).val()
			i++;
		})

		var star
		$("#star option:checked").each(function(){
			 star =$(this).text()
		});
		
		var remark=$("#remark").val();
		
		var result={};
		result.username=username;
		result.password=password;
		result.sex=sex;
		result.hobby=hobby;
		result.star =star;
		result.remark =remark;
		console.log(JSON.stringify(result));
		
		
		
		
	})
		
	</script>
</html>