您的位置：首页 > 其它

打印输入表单中的内容

2016-03-28 21:11 435 查看

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
</head>

<body>
<form>
<p>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="nickname">昵称</label>
<input type="text" id="nickname" placeholder="输入一个昵称">
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password">
</p>
<p>
<label for="passwordchecked">确认密码</label>
<input type="password" id="passwordchecked">
</p>
<p>
<label for="sex">性别</label>
<select id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>
<p>
<label for="">爱好</label>
<label>
<input type="checkbox" name="dx" value="1">旅游</label>
<label>
<input type="checkbox" name="dx" value="2">睡觉</label>
<label>
<input type="checkbox" name="dx" value="3">上网</label>
<label>
<input type="checkbox" name="dx" value="4">看电影</label>
</p>
<p>
<label for="">是否已婚</label>
<label>
<input type="radio" value="1" name="married">是</label>
<label>
<input type="radio" value="0" name="married">否</label>
</p>
<div class="center">
<input type="hidden" value="注册表单">
<input type="button" value="返回" />
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
<div class="msg"></div>
</body>

</html>

<script src="../jquery-1.12.0.js"></script>

<script type="text/javascript">
$(function(){
// @作业
// 点击提交按钮时，把输入的内容按顺序放到.msg
$('form').css('float', 'left');
$('.msg').css({float:'right',width:400,height:400,background:'#89abec',padding:20});
$(':submit').click(function(e){console.log(111)
e = e || window.event
var username = $('#username').val()
var nickname = $('#nickname').val()
var password = $('#password').val()
var sex = $('select option:selected').text()

var arr1 = []
$('input[type = "checkbox"]:checked').each(function(){
arr1.push($(this).parent().text())
})
var radio = $('input[type="radio"]:checked').parent().text()

$('.msg').html('用户名：' +username+ '<br>昵称：' +nickname+ '<br>密码:' +password+ '<br>性别:' +sex+ '<br>爱好:'+ arr1+ '<br>是否已婚：' +radio)

e.preventDefault()

})
})
</script>

打印输入表单中的内容

用户名

昵称

密码

确认密码

性别
男
女

爱好旅游睡觉上网看电影

是否已婚是否

提交重置

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航