Кнопка добавления текстовых полей в JavaScript работает неверно

Оффтоп javascript
1

Проблема с добавлением новых полей ввода

Я создал форму с выпадающим меню для выбора количества участников и кнопкой для добавления полей ввода. Однако возникла проблема: новые поля добавляются поверх уже существующих.

HTML код:

<form method="post" id="myemailform" name="myemailform" action="form-to-email.php">
    <div id="form_container">
        <label class="description" for="pax">Количество:</label>
        <div>
            <select class="select small" id="pax" name="participants">
                <option value="" selected="selected"></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
            </select>
        </div>
        <label class="description">ID:</label>
        <input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1">
        <input class="btn btn-primary" type='button' id='btnMore' value='Добавить ID'>
    </div>
</form>

JavaScript код:

jQuery(function ($) {
    $('#btnMore').click(function () {
        var formElement, fields, newField;

        var dropdown = document.getElementById("pax");
        var selectedValue = dropdown.options[dropdown.selectedIndex].text;

        formElement = $("#myemailform");
        for (var i = 1; i < selectedValue; i++) {
            fields = formElement.find("input[name^='ids']");
            newField = $(fields[0]).clone();
            newField.attr('name', 'ids' + (fields.length + 1));
            newField.attr('placeholder', 'ID #' + (fields.length + 1));
            newField.insertAfter(fields.last());
        }
    });
});

Суть проблемы:

Когда я выбираю число 10 и нажимаю кнопку, создается 10 полей. Затем, если я выбираю 14, я не хочу получить 10+14=24 текстовых поля. Мне нужно, чтобы было только 14 полей. Как это исправить? Понимаю, в чем проблема, но не знаю, как изменить код.

2

Проблема в том, что ты постоянно добавляешь к уже существующим полям. Лучше сделай по-другому - не удаляй старые поля, а просто пересчитай сколько нужно. Добавь проверку: var currentFields = formElement.find("input[name^='ids']").length; и в цикле используй for (var i = currentFields; i < selectedValue; i++). Если выбранное значение меньше текущих полей - удаляй лишние через slice(). Так будет работать в обе стороны.

3

Почему бы не очистить весь контейнер сначала? Например, $('#form_container').find('input[name^="ids"]').remove();, а затем заново создать все поля в цикле. Но нужно будет сохранить существующие значения. Кстати, зачем использовать выпадающий список, когда подойдет простой числовой ввод?

4

The Problem:

Вы создаёте форму, где количество полей ввода зависит от выбора в выпадающем меню. Проблема в том, что при изменении выбора в меню, новые поля добавляются к уже существующим, вместо замены их на новые. Вам нужно, чтобы при каждом изменении выбора в выпадающем списке, количество полей ввода соответствовало выбранному значению, а не суммировалось с предыдущим количеством.

:thinking: Understanding the “Why” (The Root Cause):

Ваш текущий JavaScript код клонирует существующие поля и добавляет их. Он не удаляет старые поля перед добавлением новых. Поэтому при каждом клике кнопки “Добавить ID” количество полей увеличивается на выбранное значение.

:gear: Step-by-Step Guide:

  1. Очистка существующих полей: Перед добавлением новых полей, необходимо удалить все существующие поля, кроме первого. Это предотвратит накопление полей при каждом изменении значения в выпадающем меню. Замените ваш код внутри функции $('#btnMore').click() следующим:
jQuery(function ($) {
    $('#btnMore').click(function () {
        var formElement, fields, newField;

        var dropdown = document.getElementById("pax");
        var selectedValue = parseInt(dropdown.value, 10); // Используем value, а не text

        formElement = $("#myemailform");
        // Удаляем все поля, кроме первого
        formElement.find("input[name^='ids']").not(':first').remove();

        // Создаём необходимое количество полей
        for (var i = 1; i < selectedValue; i++) {
            fields = formElement.find("input[name^='ids']");
            newField = $(fields[0]).clone();
            newField.attr('name', 'ids' + (fields.length + 1));
            newField.attr('placeholder', 'ID #' + (fields.length + 1));
            newField.insertAfter(fields.last());
        }
    });
});

Обратите внимание на изменения:

  • parseInt(dropdown.value, 10): Мы используем dropdown.value для получения числового значения, а не текстового (dropdown.text), и преобразуем его в целое число с помощью parseInt.
  • formElement.find("input[name^='ids']").not(':first').remove();: Эта строка удаляет все элементы input с именем, начинающимся с ids, за исключением первого.
  1. Проверка на корректность ввода: Добавьте проверку на случай, если пользователь выберет значение меньше, чем количество уже существующих полей. В этом случае, нужно удалить лишние поля.

:mag: Common Pitfalls & What to Check Next:

  • Проверьте form-to-email.php: Убедитесь, что ваш скрипт обработки формы корректно обрабатывает динамически добавляемые поля. Возможно, потребуется изменить способ обработки данных на серверной стороне.
  • Используйте более семантичный HTML: Вместо использования input[name^='ids'] для поиска полей, лучше использовать уникальный контейнер (например, div) для группировки полей и упрощения выбора. Это улучшит читаемость кода и уменьшит вероятность ошибок.

:speech_balloon: Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!