zoukankan      html  css  js  c++  java
  • 打印输入表单中的内容

    <!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',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>
    

    打印输入表单中的内容

     
  • 相关阅读:
    Java基础-3y
    对线面试官面试系列-3y
    从零单排学Redis【青铜】
    mock官方文档
    route路由组件传递参数
    axios拦截器与vue代理设置
    Sass使用方法
    Less使用方法
    Vue-cli
    Vue-组件注册
  • 原文地址:https://www.cnblogs.com/wyq-home/p/5330629.html
Copyright © 2011-2022 走看看