使用 HTML 和 JQuery 的动态表单

Question

我正在尝试使用 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>

HTML：

<form>
<div class="col-md-6 labdiv">
<div><label>Label</label>
<input type="text" name="label[]">
</div>
</div>
<div class="col-md-5 valdiv">
<div>
<label>Value</label>
<input type="text" name="value[]">
</div>
</div>
<button class="add_more">Add values</button>
</form>

如果有人可以提供帮助，那就太好了。

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

Answer 1

表单必须在method="POST"中，如果你进入php函数：

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

Answer 2

试试这个

 $(".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'
        });

});

Answer 3

一些可以改善你学习的事情：

jQuery 和你的代码

所有的 jQuery 代码都应该包含在这个...

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

在您创建的var 上，您已经将它们初始化为jQuery 元素。因此，当您再次引用它们时，您不需要（例如）$(addbutton)，因为 addbutton 会这样做。 见下面的修改代码）

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

控制台

在检查控制台时...

例如，如果您在页面中的某处编写 JS 代码 console.log(1 + 1)，因为您希望看到该总和。由于您编写客户端代码，当您的网页加载时（取决于您将 console.log() 放在哪里），如果您在所选浏览器（即 Chrome 或 IE）中检查 开发人员工具，则会出现console 部分，您可以在其中查看打印结果（即使用该示例，它将是 2）。浏览器中的 console 也会打印出它检测到的错误（即 $ is not defined - 如果您尝试引用 jQuery 但不包括该库），它是 Web 开发人员的好工具（因此得名；） ) 用于调试客户端代码。

向数组添加元素

在提交表单时获取input 值的代码：(jQuery)

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

我建议你去阅读一本关于 jQuery 代码以及 Web 开发的基本概念的书/教程 :)

例子：

• jQuery

如果卡住了，可以参考一下基础知识，上面的链接比较靠谱： - w3schools