jquery获取表单全部信息

最新推荐文章于 2022-08-15 17:58:05 发布

原创最新推荐文章于 2022-08-15 17:58:05 发布 · 974 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #form

JQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery简化表单数据收集的方法，通过一个示例展示了如何一次性获取表单中的所有用户输入，包括文本、密码和选择框等元素，并将其转换为JSON格式，便于进一步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写静态页面时我们难免会写入表单来获取用户信息，如果用户信息量过大那么一条条获取就会很麻烦，那么就可以通过jquery一次性获取表单里的全部的信息，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="../../educational/css/register.css" type="text/css">
    <link rel="stylesheet" href="../../educational/bootstrap/css/bootstrap.min.css" type="text/css"/>
    <script src="../../educational/js/jquery-2.0.3.min.js"></script>
    <title>学生校园管理系统</title>
</head>
<body>

<div class="box">

    <div class="header">欢迎注册</div>

    <div class="context">
        <form method="post" class="form-horizontal" role="form">

            <div class="form-group">
                <label class="control-label">学生学号</label>
                <div>
                    <input type="text" class="form-control" name="number" placeholder="请输入学号">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">输入密码</label>
                <div>
                    <input type="password" class="form-control" name="pwd1" id="pwd1" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">确认密码</label>
                <div>
                    <input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="请确认密码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">手机号码</label>
                <div>
                    <input type="text" class="form-control" name="phone" placeholder="请输入手机号码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">身份证</label>
                <div>
                    <input type="text" class="form-control" name="identity" placeholder="请输入身份证">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学生性别</label>
                <div class="col-sm-2">
                    <select class="selectpicker" name="sex">
                        <option value="0">----请选择---</option>
                        <option value="1" name="man">男</option>
                        <option value="2" name="woman">女</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class=" control-label">家庭住址</label>
                <div>
                    <input type="text" class="form-control" name="address" placeholder="请输入家庭住址">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学校名称</label>
                <div>
                    <input type="text" class="form-control" name="school" placeholder="请输入学校名称">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学生班级</label>
                <div>
                    <input type="text" class="form-control" name="classes" placeholder="请输入班级">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">专业名称</label>
                <div>
                    <input type="text" class="form-control" name="professional" placeholder="请输入专业">
                </div>
            </div>
            <button type="button" class="but_register" id="but_register">注册</button>
        </form>
    </div>
    <div class="footer">
        青果校园学生管理系统
    </div>
</div>
</body>
<script type="text/javascript">
    $("#but_register").click(function () {
        var formData = JSON.stringify($(".form-horizontal").serialize());
        if (formData.indexOf("=")>=0) {
            formData.replace("=", ":");
        }
        console.log(formData);
    });

</script>
</html>

获取表单的整个信息的代码如上加粗所示，但是刚开始一样的代码却没有获取到表单的信息，我一开始很奇怪，后来我发现是因为input标签没有写上name属性的原因。