Иногда в панелях администратора мы хотим, чтобы динамически генерируемые параметры ввода HTML помещали дополнительные данные. В этой статье мы увидим такую концепцию, как динамическое добавление и удаление полей ввода с использованием jQuery.
Будет простой код jquery, в котором мы будем запускать прослушиватель событий и управлять функциональностью. Мы также будем использовать некоторые методы цепочки jquery, которые взаимодействуют с DOM HTML.
Итак, внутри этого мы рассмотрим следующие функции для динамического добавления дополнительных полей с использованием jQuery и доступа к значениям через PHP.
- Добавить Удалить Динамически поля ввода с помощью jQuery.
- Получить значение входных значений с помощью PHP.
Давайте начнем.
Оглавление
- Создание HTML-макета с Wrapper
- Добавление событий jQuery в селекторах
- Полный код, добавление и удаление динамических входных данных с помощью jQuery
- Получить несколько значений в PHP
Создание макета HTML с помощью Wrapper
HTML
<form class="form-inline" id="frm-add-data" action="javascript:void(0)"> <div class="field_wrapper"> <div> <div class="form-group"> <label for="product_name">Product Name:</label> <input type="text" class="form-control" id="product_name" placeholder="Enter name" name="product_name[]"> </div> <div class="form-group"> <label for="amount">Amount:</label> <input type="number" class="form-control" id="amount" placeholder="Enter amount" name="amount[]"> </div> <div class="form-group"> <a href="javascript:void(0);" class="add_button" title="Add field">+ Add More</a> </div> </div> </div> </form>
- Внутри приведенного выше кода мы видим, что у нас есть div с классом field_wrapper.
- У нас есть кнопка с id add_button. Мы добавим событие onclick, которое добавит динамические поля ввода html внутри данного div-оболочки.
- Поля ввода, которые массово отправляются на сервер или, скажем, содержат несколько значений, задайте атрибуты имен в формате массива name=”product_name[]”
"Читать далее[…]"