个人中心
gpt4 book ai didi

javascript - 如何使用jquery读取html表单内容？

转载 作者：行者123 更新时间：2023-12-02 17:21:06 25 4
gpt4 key购买 nike

我有一个 html 表单，可以使用 jquery 动态添加输入元素。最后我想提交/读取表单上的所有数据。我使用了序列化方法，但它为我提供了最初在表单上的元素的数据，而不是动态添加的元素的数据。

这是我的工作:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        function call(class_name) {

            console.log(class_name);
            $("#new_append_pass").append('<input type="password" class="username_' + class_name + '" name="pass">');
        }
        $(document).ready(function () {
            var count = 0;
            var alt, str;
            $(".user_pass a ").click(function () {
                $("#append_me").append('<input type="password" class="' + $("#append_me").attr("alt") + '" name="pass">');
            });

            $(".new_user_pass a ").click(function () {
                count = count + 1;
                alt = $("#new_append_me").attr("alt") + "_" + count;
                str = '<input type="text" class="username_' + count + '" name="username">' +
                '<input type="password" class="' + alt + '" name="pass">' +
                '<span alt="username_' + count + '" id="new_append_pass"></span>' +
                '<a href="#" onClick="call(' + count + ')" class="add_new_pass"> Add another pass </a>';
                $("#new_append_me").append(str);

            });


            $("#submit").click(function () {

                var get_class_name = $(".user_pass").find("input[type=text]").attr("name");
                var get_class_name1 = $("#new_append_me").find("input[type=text]").attr("name");
                console.log($("." + get_class_name).serialize());
                console.log($("." + get_class_name1).serialize());
            });
        });

    </script>
</head>
<body>

    <div class="main">
        <div class="user_pass">
            <input type="text" class="username" name="username" />
            <input type="password" class="username" id="username" name="pass" />
            <span alt="username" id="append_me"></span>
            <a href="#">Add another pass </a>

            <div class="new_user_pass">
                <a href="#">Add another user </a>
                <span alt="username" id="new_append_me"></span>
            </div>
        </div>
    </div>
    <input type="button" value="submit" id="submit" />
</body>
</html>

如何读取动态添加的表单元素的内容？？？

最佳答案

请考虑采取以下步骤来改进您的标记结构。在 Fiddle 中解码你的代码片段是很困难的。

  1. 每个<input>元素有不同的类、不同的属性。并且您正在尝试使用通用选择器访问它们。
  2. 您的<a>链接应该有一个唯一的属性或选择器。点击“添加另一个用户”时，两者都会被解雇
  3. 尝试使用单独的 <div>或至少适当的选择器来访问两组不同的 <input>元素。
  4. <input> 都没有元素具有相同的类。所以$('classname').serialize()永远不会为你的元素工作。
  5. .attr('name')为了上课？逻辑错误；作为每个 <input> 的“名称”属性不一样。
  6. 使用委托(delegate)。 on() ，如果是动态生成的元素。
  7. 保持共同约定；类选择器或 Id，不要混合使用。

这是您的 fiddle 解决方案。对 Html 属性、点击事件和几乎所有内容进行了更改。

关于javascript - 如何使用jquery读取html表单内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23947333/

25 4 0
文章推荐： django - 如何将 'exception' 参数传递给 403 View ？
文章推荐： javascript - 刷新单个 DIV - e.preventDefault();
文章推荐： ruby - 如何使用 Ruby 中重复字符的计数来压缩字符串？
文章推荐： javascript - 如何使用 Enter()、exit() 和更新水平 "stacked"图表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com