点击提交按钮时用Jquery获取表单内容

最新推荐文章于 2022-10-26 10:24:13 发布

本心_

最新推荐文章于 2022-10-26 10:24:13 发布

阅读量2.2k

点赞数 5

分类专栏： Web 文章标签： html jquery

本文链接：https://blog.csdn.net/weixin_40571331/article/details/107256223

版权

Web 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

需求：在点击提交按钮时，用jQuery获取表单的内容，包括姓名密码等信息，并存储在一个json对象中

代码&注释:

<!DOCTYPE html>
<html>
    <head>
        <title>
            test
        </title>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <form action="" onsubmit="myFunction()" id="form-test">
            <input type="text" name="name">
            <input type="text" name="email">
            <input type="password" name="password">
            <button type="submit" id="sub">提交</button>
        </form>
    </body>
    <script>
        $('#sub').click(function() {
            // 方法一：
            let json = {};
            json.name = $('#form-test input[name="name"]').val(); // 一个个设置属性和内容
            json.email = $('#form-test input[name="email"]').val();
            json.pwd = $('#form-test input[name="password"]').val();
            json = JSON.stringify(json);
            console.log(json);

            // 方法二： 
            // 当内容较多时推荐使用，使用serializeArray()方法获得表单内容，缺点是不够灵活，表单属性及属性值应当规范
            // let json = {};
            // let arrayForm = $('#form-test').serializeArray();
            // for (x in arrayForm) {
            //     json[arrayForm[x].name] = arrayForm[x].value;
            // } 
            // json = JSON.stringify(json);
            // console.log(json);
        })

        // 也可使用js方法获取
        // function myFunction() {
        //     let json = {};
        //     let arrayForm = $('#form-test').serializeArray();
        //     for (x in arrayForm) {
        //         json[arrayForm[x].name] = arrayForm[x].value;
        //     } 
        //     json = JSON.stringify(json);
        //     console.log(json);
        //     // alert('提交');
        // }
    </script>
</html>

本心_

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
点击提交按钮时用Jquery获取表单内容

需求：在点击提交按钮时，用jQuery获取表单的内容，包括姓名密码等信息，并存储在一个json对象中代码&注释:<!DOCTYPE html><html> <head> <title> test </title> <script src="jquery-3.5.1.js"></script> </head>
复制链接

扫一扫