Question

我的html表单中有一个动态部分。单击按钮时，用户可以添加标签名称和标签类型。假设有3种标签名称和标签类型，则数据应以以下格式提交。

Array[0][name] = tag1 name, Array[0][type] = tag1 type
Array[1][name] = tag2 name, Array[1][type] = tag2 type 
Array[2][name] = tag3 name, Array[2][type] = tag3 type

有人可以帮我吗？

Answer 1

我认为您正在寻找一个多维数组，该数组可以在数组的每个位置内存储一个数组。假设您已经有一个表单，html应该看起来像这样：

 <form class="" action="index.html" method="post">
     <div class="inputs">
         <input type="text" name="tagName" value="">
         <input type="text" name="tagType" value="">
     </div>
     <a href="#" class="addRow">Add new tag name and type</a>
     <button type="submit" name="button">Submit form data</button>
 </form>

对于功能，您可以使用类似的方法来存储信息，然后提交表单：

    //Initialization of array
    var javascriptArray = [];

    //Function to replicate fields in the form
    function replicateFields(){
        var elementToReplicate = $('.inputs').first(), //Only clone first group of inputs
            clonedElement = elementToReplicate.clone();//Cloned the element
        clonedElement.find('input').val(''); //Clear cloned elements value on each new addition
        clonedElement.insertBefore($('form a'));
    }

    //Calling function on click
    $('.addRow').click(function(){
        replicateFields();
    });

    //Go through inputs filling up the array of arrays.
    $('form').submit(function(){
        $('.inputs').each(function(){
            javascriptArray.push([$(this).find('input[name="tagName"]').val(), $(this).find('input[name="tagType"]').val()]);
        });
        console.log(javascriptArray);
        return false; // remove this to submit the form.
    });

您可以在开发人员工具中的控制台中查看要提交的信息。

让我知道这是否有帮助，狮子座。

//Initialization of array
        var javascriptArray = [];
        
        //Function to replicate fields in the form
        function replicateFields(){
            var elementToReplicate = $('.inputs').first(), //Only clone first group of inputs
                clonedElement = elementToReplicate.clone();//Cloned the element
            clonedElement.find('input').val(''); //Clear cloned elements value on each new addition
            clonedElement.insertBefore($('form a'));
        }

        //Calling function on click
        $('.addRow').click(function(){
            replicateFields();
        });

        //Go through inputs filling up the array of arrays.
        $('form').submit(function(){
            $('.inputs').each(function(){
                javascriptArray.push([$(this).find('input[name="tagName"]').val(), $(this).find('input[name="tagType"]').val()]);
            });
            console.log(javascriptArray);
            return false; // remove this to submit the form.
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="index.html" method="post">
         <div class="inputs">
             <input type="text" name="tagName" value="">
             <input type="text" name="tagType" value="">
         </div>
         <a href="#" class="addRow">Add new tag name and type</a>
         <button type="submit" name="button">Submit form data</button>
     </form>

Answer 2

这是进行这项工作的另一种可能性。一个简单的表单，其中包含div来包含标签，而一个小的输入字段用于添加新标签。

var tagid = 1;

function addTag() {
  var div = document.getElementById("tags");
  var name = document.getElementById("tname").value;
  var type = document.getElementById("ttype").value;
  div.innerHTML += "tag" + tagid + "<br><input type='text' name='tag[" + tagid + "][name]' value='" + name + "'><br><input type='text' name='tag[" + tagid + "][type]' value='" + type + "'><hr>";
  tagid++;
}

<html>

<body>

  <form id="form">
    tags:<br>
    <div id="tags">
    </div>

    <input type="submit" value="Submit">
  </form>
  <hr> tag name: <input id="tname" type="text" name="tname"><br> tag type: <input id="ttype" type="text" name="ttype"><br>
  <button onclick="addTag()">add tag</button>
</body>

</html>

动态HTML表单元素作为数组

2 个答案: