Javascript 如何使用jquery读取html表单内容？_Javascript_Jquery_Html_Forms

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

javascript jquery html forms

Javascript 如何使用jquery读取html表单内容？,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个html表单，可以使用jquery动态添加输入元素。最后，我想提交/读取表单上的所有数据。我使用了serialize方法，但它为我提供了最初在表单上的元素的数据，而不是动态添加的元素以下是我的作品： <html> <head> <title></title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

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

以下是我的作品：

<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>


函数调用（类名称）{
控制台日志（类名称）；
$（“#新附加(通行证”）。附加（“”）；
}
$（文档）.ready（函数（）{
var计数=0；
变异体alt，str；
$（“.user\u pass a”）。单击（函数（）{
$（“#append_me”）。append（“”）；
});
$（“.new\u user\u pass a”）。单击（函数（）{
计数=计数+1；
alt=$（“#新的#附加#me”）.attr（“alt”）+“#计数；
str=''+
'' +
'' +
'';
$（“#新的#追加#me”）.append（str）；
});
$（“#提交”）。单击（函数（）{
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”）；
log（$（“+get_class_name）.serialize（））；
log（$（“+get_class_name1.serialize（））；
});
});

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

使用ever lovable

$（查询）

按其类/id定位它们，并根据输入类型，通过该查询定位它们的值。一些使用

$（查询）。值，一些使用$（查询）。文本，复选框使用$（查询）。选中。在jQueryAPI中查找它们，或者在控制台上查找console.log（$（query））
。（chrome上的ctrl+shift+J）
顺便说一下，如果你要把类添加到一次性的东西（就像你再也不会使用同一个类）一样，你最好使用IDS。
 < P>请考虑以下步骤来改进标记结构。很难用小提琴来解码你的片段
每个
元素都有不同的类和属性。您正试图使用公共选择器访问它们
在动态生成元素的情况下，您的

保持共同的习惯；无论是类选择器还是Id，都不要混用它们
这是您的小提琴解决方案。更改了Html属性、单击事件和几乎所有内容。
您的整个结构一团糟。new\u pass和new\u user的
元素是嵌套的。因此，为每种方法获取
都很复杂。而且你的
链接也乱七八糟。单击添加另一个用户，添加另一个通行证也会被解雇。您的表单标签在哪里？Thnks Shaunakde。。但当我将新密码文本框添加到动态添加的div中时，它只会添加到第一个div中。