JavaScript: динамические поля для формы
как добавить неограниченное количество полей в форму с помощью JavaScript и сохранить результат в базе данных с помощью PHP
Иногда особенности интерфейса приложения требуют, чтобы у пользователя была возможность добавить в веб-форму неограниченное количество полей ввода. Для этого мы можем добавить кнопку Добавить поле (Add field), которая позволит при необходимости динамически создавать новые поля.
Возможности JavaScript и JQuery позволяют без особых усилий создать функционал генерации произвольного количества новых полей. Кроме того, с помощью PHP достаточно просто сохранить данные динамических полей в базе данных.
Создадим новую форму и добавим скрипт с функцией генерации динамический полей:
Итак, мы создали функцию add_field, добавляющую при каждом вызове новое поле ввода, которое будет являться предпоследним дочерним элементом в форме. Имя каждого нового поля ввода устанавливается как text_field[], определяя его как элемент массива.
Следующим шагом, чтобы сохранить динамические данные, создадим файл save_data.php:
$conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME");
$data = $_POST['text_field'];
$data = implode(",",$data);
$query = "INSERT INTO `test`(`data`) VALUES ('$data')";
if(mysqli_query($conn,$query)) {
echo "Success: Data successfully inserted";
} else {
echo "Error: Could not insert data into table";
}
Для начала, мы сохраняем данные формы в массив $data, затем конвертируем массив в строку с помощью встроенной функции implode() и , наконец, сохраняем полученную строку в базу данных.
Спасибо за внимание.
Перевод статьи Nachiket Panchal “How to Add Unlimited Fields in Form Using JavaScript and Store Into Database With PHP”.
