Добавление динамических элементов ввода в форму

Я читал много блогов и сообщений о динамическом добавлении полей, но все они дают очень сложный ответ. То, что мне нужно, не так уж сложно.

Мой HTML-код:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Таким образом, пользователь вводит целочисленное значение (я проверяю проверку с помощью javascript) в поле input. И нажав ссылку Fill Details, для него появится соответствующее количество полей ввода. Я хочу достичь этого, используя javascript.

Я не профессионал в javascript. Я думал, как я могу получить целое число, заполненное пользователем в поле input по ссылке и отображающее соответствующее количество полей ввода.

Ответ 1

Вы можете использовать обработчик событий onclick, чтобы получить входное значение для текстового поля. Удостоверьтесь, что вы даете поле уникальному атрибуту id, чтобы вы могли безопасно ссылаться на него через document.getElementById():

Если вы хотите динамически добавлять элементы, у вас должен быть контейнер, где их можно разместить. Например, a <div id="container">. Создайте новые элементы с помощью document.createElement() и используйте appendChild() для добавления каждого из них в контейнер. Вас может заинтересовать вывод значимого атрибута name (например, name="member"+i для каждого из динамически сгенерированных <input>, если они должны быть представлены в форме.

Обратите внимание, что вы также можете создавать элементы <br/> с помощью document.createElement('br'). Если вы хотите просто вывести какой-либо текст, вы можете использовать document.createTextNode().

Кроме того, если вы хотите очистить контейнер каждый раз, когда он будет заполнен, вы можете использовать hasChildNodes() и removeChild() вместе.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

См. рабочий пример в JSFiddle.

Ответ 2

Попробуйте этот код javascript для динамического включения поля формы и удаления

   $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".container1");
        var add_button      = $(".add_form_field");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
            }
      else
      {
      alert('You Reached the limits')
      }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });

<div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
<div><input type="text" name="mytext[]"></div>
</div>

Обратитесь Демо здесь