通过jquery来获取表单信息并输出到控制台

发布于:2023-01-16 ⋅ 阅读:(370) ⋅ 点赞:(0)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.6.0.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").on("click",function(){
             var p=$("input[name='userName']").val();
             var a=$("input[name='pwd']").val();
             var b=$("input[name='sex']").val();
             var arrs=$("input[name='hobby']:checked");
             var c=[];
             for(var i=0;i<arrs.length;i++)
             {
                 c[i]=$(arrs[i]).val();
             }
             var d=$("#star option:selected").text();
             var e=$("textarea[name='remark']").val();
                console.log(p);
                console.log(a);
                console.log(b);
                console.log(c);    
                console.log(d);
                console.log(e);
                })
        })
        
            
        </script>
    </head>
    <body>
            <form action="#" method="post">
                账号:<input id="userName" type="text" name="userName" placeholder="请输入账号" /><br />
                密码:<input id="pwd" type="password" name="pwd" placeholder="请输入密码" /><br />
                性别:<input   type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" />女<br />
                爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
                <input type="checkbox" name="hobby" value="football" />足球<br />
                星座:<select name="star" id="star">
                    <option value="1">白羊座</option>
                    <option value="2">巨蟹座</option>
                    <option value="3">射手座</option>
                </select><br />
                备注:<textarea  id="remark" name="remark" rows="5" cols="50"></textarea><br />
                <input id=btn type="button" name="submit" value="注册" />
                
            </form>
        
    </body>
</html>

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到