Динамические элементы формы HTML в виде массива - PullRequest
Новая
       1

Динамические элементы формы HTML в виде массива

0 голосов
/ 14 декабря 2018

У меня есть динамический раздел в моей 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

Может кто-нибудь помочь мне в этом?

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

вот еще одна возможность, как заставить эту работу.простая форма с 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>
0 голосов
/ 14 декабря 2018

Я думаю, что вы ищете многомерный массив, который может хранить массив в каждой позиции массива.Предполагая, что у вас уже есть форма, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...