Javascript 使用HTML和JQuery的动态表单

我正在尝试使用HTML和CSS创建一个动态表单。我在下面添加部分代码。我不明白为什么代码不起作用

JavaScript:

 <script>
$(document).ready(function(e) {
    var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
    var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
    var labdiv = $(".labdiv");
    var valdiv = $(".valdiv");
    var addbutton = $(".add_more");
    $(addbutton).click(function(){
            $(labdiv).append(labelfiled);
            $(valdiv).append(valuefield);
    });
 </script>

$（文档）.ready（函数（e）{
var labelfiled='Label'；
var ValueField=‘值’；
var-labdiv=$（“.labdiv”）；
var valdiv=$（“.valdiv”）；
var addbutton=$（“.add_more”）；
$（添加按钮）。单击（函数（）{
$（labdiv）.append（labelfiled）；
$（valdiv）.append（valuefield）；
});

HTML:

标签
价值
增加价值

如果有人能帮忙，那就太好了

我还想知道当我将其提交到数组from中的javascript变量时如何处理数据。例如，如果我在from中有两个值输入，我想将它们存储在javascript数组中，然后将其转换为JSON。

表单必须在method=“POST”中，如果您进入php函数：

if(!empty($_POST) && isset($_POST){ /*try something with $_POST*/ }

试试这个

 $(".add_more").click(function() {
                   var postData = {
                        field1: $("#id_field1").val(),
                        field2: $("#id_field2").val()
                    };

    $.ajax({
            dataType: "json",
            data:JSON.stringify(postData),
            url: URL,
            method: 'POST'
        });

}))

有几件事可以提高你的学习能力：

jQuery和您的代码

所有jQuery代码都应该包装在这个

$(document).ready(function() {
    // jQuery
});

在您创建的

var

上，您已经将它们初始化为jQuery元素。因此，当您再次引用它们时，您不需要（例如）像addbutton那样使用$（addbutton）。见下文修订的代码）

我建议您去读一本关于jQuery代码以及web开发基本概念的书/教程：）

示例：

如果遇到卡滞，请参考基本信息，上面的链接更可靠：

---

-

您的控制台有错误吗？您缺少

}）

在脚本标记的末尾关闭

$（文档）。ready（）

调用。补充lexith的评论：这就是为什么代码缩进是一件美妙的事情。@lexith hi，我是web开发新手，不知道从哪里可以看到控制台。我用AdvDreamweaver做这个。考虑删除W3Studio的引用，因为它不是官方的，到目前为止最糟糕的文档，如第一页可以找到。为什么？因为：那篇文章提到w3schools在过去一年左右取得了进步。我不是建议你虔诚地使用这个网站。我只是建议建立一个网站，作为基本知识的参考。我相信OP会发现网站的某些部分很有用，因为它们是初学者。我编辑了我的答案，在链接背后添加了额外的理由。这些链接可能有所改进，但它仍然不是最好的引用网站。也许您希望使用更可靠的东西，比如通用HTML/CSS/Javascript参考，并且像您已经做的那样，明确地参考工具/插件（或任何东西）的官方文档，比如jQuery。只是一个建议，无意冒犯：）

$(document).ready(function() {
    // jQuery
});

<script>
    $(document).ready(function(e) {
        var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
        var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
        var labdiv = $(".labdiv");
        var valdiv = $(".valdiv");
        var addbutton = $(".add_more");
        addbutton.click(function(){
            labdiv.append(labelfiled);
            valdiv.append(valuefield);
        });
    });
</script>

var array = [];
$("form").on("submit", function() {
    $("input").each(function() {
        array.push($(this).val();
    });
});