打印輸入表單中的內容
<!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>
打印輸入表單中的內容javascript
相關文章
- 1. C#打印字符串內容，例如打印Textbox內容
- 2. Python中打印列表的序號和內容
- 3. python打印列表中的內容，而不是unicode字符
- 4. JS調用word打印當前表單內容
- 5. EXCEL表格限定輸入的內容
- 6. window.print()打印網頁中指定內容
- 7. Python -- List 打印中文內容
- 8. 打印輸入中單詞長度的直方圖程序
- 9. 打印輸入中單詞長度的直方圖
- 10. c++之 printf 打印內容
- 更多相關文章...
- • ionic 表單和輸入框 - ionic 教程
- • jQuery Mobile 表單輸入元素 - jQuery Mobile 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
