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

最新推荐文章于 2024-05-31 10:04:55 发布

Hermit_FAN

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量229

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/Hermit_FAN/article/details/126347303

版权

body部分

<body>
		<div class="index">
			<span><b>位置：</b></span>&nbsp;<span>首页</span>&nbsp;<span>--></span>&nbsp;<span>表单</span>
		</div>
		<div class="thing">
			<span class="sp"><b>注册信息</b></span>
		</div>
		<div class="div">
			<form name="textForm" action="#" id="form">
				账号 &nbsp;&nbsp;&nbsp;&nbsp; <input class="zhanghao" type="text" name="userName" placeholder="请输入账号"><br />
				<span> </span><br>
				密码 &nbsp;&nbsp;&nbsp;&nbsp; <input class="zhanghao" type="password" name="pwd" placeholder="请输入密码"><br >
				<span> </span><br>
				性别 &nbsp;&nbsp;&nbsp;&nbsp;  <input type="radio" name="sex" value="男">男
						<input type="radio" name="sex" value="女">女<br>
				<span> </span><br>
				爱好 &nbsp;&nbsp;&nbsp;&nbsp;  <input  type="checkbox" name="hobby" value="唱歌">唱歌&nbsp;&nbsp;
						<input type="checkbox" name="hobby" value="跳舞">跳舞&nbsp;&nbsp;
						<input type="checkbox" name="hobby" value="足球">足球<br>
				<span> </span><br>
				星座 &nbsp;&nbsp;&nbsp;&nbsp;  <select name="star" class="star">
						<option value="白羊座">白羊座</option>
						<option value="巨蟹座">巨蟹座</option>
						<option value="双子座">双子座</option>
						</select><br>
				<span> </span><br>
				<div class="font">备注</div>  <textarea class="beizhu" name="remark" cols="30" rows="10"></textarea>
				<br>
				<input type="submit" class = "button" value="提交"/>
			</form>
		</div>
	</body>

js部分

<script src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#form").on("submit",function(){
					console.log("账号：" + $("input[name=userName]").val());
					console.log("密码：" + $("input[name=pwd]").val());
					console.log("性别：" + $("input[name=sex]:checked").val());
					var hobbys = [];
					var str = "爱好：";
					$("input[name=hobby]:checked").each(function(i){
						hobbys[i]=$(this).val();
					})
					console.log(str+hobbys);
					console.log("星座：" + $("select :selected").val());
					console.log("备注：" + $("textarea[name=remark]").val());
				})
			})
		</script>

css部分

.index{
	height: 30px;
	background-color: azure;
}
.thing{
	height: 50px;
	border-bottom: 1px solid black;
	position: relative;
}
.sp{
	border-bottom: 4px solid skyblue;
	position: absolute;
	bottom: 0px;
}
.div{
	position: absolute;
}
.form{
	position: relative;
	top: 30px;
	left: 100px;
}
.zhanghao{
	width: 30vw;
	height: 25px;
	border: 1px solid black;
	border-radius: 5px;
}
.star{
	width: 15vw;
	height: 25px;
	background-color: white;
	border: 2px solid gray;
	border-radius: 3px;
}

.font{
	float: left;
}
.beizhu{
	margin-left: 25px;
	width: 50vw;
	height: 18vh;
	border-radius: 5px;
}
.button{
	width: 100px;
	height: 30px;
	margin-top: 20px;
	margin-left: 50px;
	background-color: deepskyblue;
	font-size: 15px;
	color: white;
}

实现效果