Question

＆＃13;

   document.addEventListener("DOMContentLoaded", function () {
                var form = document.querySelector("form");
                    var formContainer = document.querySelector('#container');
                document.getElementById("newPlace").addEventListener("click", cloneSection);
                form.addEventListener("click", function (evt) {

                    if (evt.target.name == "remove")
                        formContainer.removeChild(sectionFor(evt.target));
                });
                form.addEventListener("input", function (evt) {
                    if (evt.target.name == "uberschrift")
                        updateHeader(sectionFor(evt.target), evt.target.value);
                });

               
               

                function cloneSection(evt) {
                    var target = form.querySelector("#container section:first-child").cloneNode(true);
                    formContainer.appendChild(target);
                    updateHeader(target, null);
                    var textFields = target.querySelectorAll("input[type=text]");
                    for (j = 0; j < textFields.length; ++j)
                        textFields[j].value = '';
                }
                function updateHeader(section, hdrValue) {
                var header = section && section.querySelector("h2 span");

                if (hdrValue != null)
                    header.innerText = " - " + hdrValue;

                else
                    header.innerText = "";

            }



                function sectionFor(control) {
                    while (control && control.tagName.toLowerCase() != "section")
                        control = control.parentNode;
                    return control;
                }
            });

＆＃13;

<form name="form1" action="index.php" method="post" autocomplete="off" enctype="multipart/form-data">
        <div id="container" style="display: block;">
        <section>
            <h2>Place <span></span><button id="remove" type="button" name="remove">Delete</button></h2>
            <label for="headline"><span>Headline:</span><input type="text" name="headline" size="80"></label>
            
        </section>
       </div>
        <!--</form>-->
        
            
        <button id="newPlace" type="button">New Headline</button>
        <input type="hidden" name="aktion" value="save">
        <button id="enter" type="submit" value="save">Submit</button>
        

        
        
        
        
    
    </form>

＆＃13;

我写了一个动态表单，您可以使用按钮添加表单字段。现在我试图将它们保存到mysql数据库中，但它只获取生成的输入字段的最后一个值。我想通了，因为仍然在每个创建的字段中的名称仍然是相同的。如何用纯JS解决这个问题？我正在考虑使用类似循环的东西，然后简单地增加它。

<form name="form1" action="index.php" method="post" autocomplete="off" enctype="multipart/form-data">
    <div id="container" style="display: block;">
    <label for="headling"><span>Headline:</span><input type="text" name="headline" size="80"></label></div>

提前致谢！

Answer 1

如果您正在动态创建输入，那么您应该使用name作为数组，如下所示：

<input type="text" name="data[]" />

您可以作为数组访问服务器端（POST方法示例）：

print_r($_POST['data']);

为动态表单创建动态名称

1 个答案: