Иногда в панелях администратора мы хотим, чтобы динамически генерируемые параметры ввода HTML помещали дополнительные данные. В этой статье мы увидим такую ​​​​концепцию, как динамическое добавление и удаление полей ввода с использованием jQuery.

Будет простой код jquery, в котором мы будем запускать прослушиватель событий и управлять функциональностью. Мы также будем использовать некоторые методы цепочки jquery, которые взаимодействуют с DOM HTML.

Итак, внутри этого мы рассмотрим следующие функции для динамического добавления дополнительных полей с использованием jQuery и доступа к значениям через PHP.

  1. Добавить Удалить Динамически поля ввода с помощью jQuery.
  2. Получить значение входных значений с помощью 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[]”

"Читать далее[…]"