使用JQuery获取form表单的值在控制台打印

山海不说话958

已于 2022-08-22 16:30:07 修改

阅读量414

点赞数

于 2022-08-15 18:57:55 首次发布

本文链接：https://blog.csdn.net/qq_62857943/article/details/126352396

版权

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<style type="text/css">
			body {
				margin: 0px; fontsize: 14px;
			}

			.top {
				width: 100%; height: 40px; backgroundcolor: azure; border: 0px solid red; position: relative;
			}

			.top span {
				fontweight: bold; float: left; lineheight: 40px; marginleft: 7px;
			}

			.topul {
				/*设置为none会把ul中实心圆圈去掉*/
				margin: 0px; liststyle: none;
			}

			.topul li {
				float: left; lineheight: 40px; marginleft: 5px; marginright: 3px;
			}

			.main {
				margin: 10px 18px;
			}

			.main_title {
				height: 30px; margintop: 10px; marginbottom: 20px;
					/* borderbottomcolor: gainsboro;
					borderbottomstyle: solid;
					borderbottomwidth: 1px; */
					borderbottom: 1px solid gainsboro; position: relative;
			}

			.main_title span {
				fontweight: bolder; borderbottom: 3px solid #00FFFF; lineheight: 30px; position: absolute; bottom: 1px;
			}

			.main_body {
				width: 100%;
			}

			.main_body ul {
				liststyle: none;
			}

			.main_body ul li {
				marginbottom: 20px; position: relative;
			}

			label {
				width: 80px; border: 0px solid red; display: inlineblock; lineheight: 28px; textalign: center; float: left;
			}

			input[name="userName"],
			input[name=pwd] {
				width: 300px; lineheight: 28px;
					/*边框圆角*/
					borderradius: 5px; border: 1px solid #A9A9A9;
			}

			select {
				width: 160px; width: 160px; height: 28px; borderradius: 5px; border: 1px solid #A9A9A9;
			}

			textarea {
				width: 600px; height: 100px; borderradius: 5px; border: 1px solid #A9A9A9;
			}

			input[type="button"] {
				width: 100px; textalign: center; lineheight: 28px; backgroundcolor: darkturquoise; border: 0px solid white; color: white; borderradius: 5px;
			}

			input[type="radio"],
			input[type="checkbox"] {
				margintop: 9px;
			}
		</style>
		<script type="text/javascript">
			//获取表单数据
			$(function(){
				$("#btn").click(function(){
					var userName = $("#userName").val();
					var pwd = $("#pwd").val();
					
					var sex = $("input[name='sex']:checked").val();
					
					var hobby = [];
					var hobbys = $("input[name='hobby']:checked");
					for(var i = 0; i < hobbys.length; i++ ){
						hobby[i] = $(hobbys[i]).val();
					}
					
					var star = $("select option:selected").html();
					
					var remark = $("#remark").val();
					
					var results = {};
					results = {userName:userName, pwd:pwd, sex:sex, hobby:hobby, star:star, remark:remark};
					console.log(results);
				})
			})
		</script>
	</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>
			<form>
				<div class="main_body">
					<ul>
						<li>
							<label>账号</label>
							<input id="userName" type="text" name="userName" placeholder="请输入账号" />
						</li>
						<li>
							<label>密码</label>
							<input id="pwd" type="password" name="pwd" placeholder="请输入密码" />
						</li>
						<li>
							<label>性别</label>
							<input type="radio" name="sex" value="male" />男
							<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>
							</select>
						</li>
						<li>
							<label>备注</label>
							<textarea id="remark" name="remark"></textarea>
						</li>
						</li>
						<li>
							<label>&nbsp;</label>
							<input id="btn" type="button" name="submit" value="注&nbsp;册" />
						</li>
					</ul>
				</div>
			</form>
			<p id="result"></p>
		</div>
	</body>
</html>

浏览器运行页面