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

Question

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

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

мой HTML код:

<input type="text" name="member" value="">Number of members: (max. 10)<br />

<a href="#" id="filldetails">Fill Details</a>

Итак, пользователь введет целочисленное значение (я проверяю проверку с помощью javascript) в

519 2

javascript html forms

2 ответов:

Comments

Ничего не найдено.

Xavi López · Accepted Answer · 2017-12-28 12:26:24

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

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

обратите внимание, что вы также можете создать <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.

M. Lak · Accepted Answer · 2018-08-22 08:21:13

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

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

см. Демо Здесь