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

Question 1

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

Мой 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поле через ссылку и отображающее соответствующее количество полей ввода.

Question 2

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

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

Question 3

Попробуйте этот код 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--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Развернуть фрагмент

См. Демо здесь

Answer 1

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

Мой 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поле через ссылку и отображающее соответствующее количество полей ввода.

Answer 2

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

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

Answer 3

Я последовал твоему совету. Но когда я нажимаю, консоль браузера показывает эту ошибку:Uncaught TypeError: Cannot call method 'appendChild' of undefined

xan

Answer 4

Ответ так полезен. И как я могу добавить класс CSS в поле

Правинрай Венкатачалам

Answer 5

3

@Pravin Рад, что это помогло, см. Как добавить класс к заданному элементу? . В основном используюinput.className += ' someCSSClass';

Хави Лопес

Answer 6

1

Когда я отправляю форму, новые поля, сгенерированные динамически, не отправляются, как другие поля, которые были частью исходного HTML. Они появляются визуально, и я могу их осмотреть, но они не подчиняются. Есть идеи, почему это произошло?

circle1

Answer 7

@ circle1 Убедитесь, что у динамически сгенерированных элементов есть уникальный nameатрибут. При отправке формы значения будут передаваться только элементам формы с атрибутом name.

Xavi López

Answer 8

Попробуйте этот код 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--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Развернуть фрагмент

См. Демо здесь

Answer 9

Возможно, я делаю что-то не так, но в моем случае любое нажатие Enter в текстовом поле в этой форме приведет к срабатыванию функции кнопки «Добавить новое поле», что, вероятно, является нежелательным поведением ...

Макси Мус,

Answer 10

1

<button type="button" ...>и проблема решена.

Макси Мус

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

Ответы: