Динамическое добавление полей ввода в форму с использованием JavaScript и PHP

Иногда требуется предоставить пользователям возможность добавлять неограниченное количество полей ввода в форму на веб-странице. Это может быть полезно, например, при сборе информации, количество которой заранее неизвестно. Мы можем реализовать такую функциональность с помощью кнопки «Добавить поле» (Add field), которая будет динамически создавать новые поля ввода по мере необходимости.

С помощью JavaScript и jQuery можно легко реализовать динамическое добавление полей. А с помощью PHP — обработать и сохранить данные этих полей в базе данных.

Содержание

Шаг 1: Создание формы и добавление скрипта для генерации
Шаг 2: Обработка и сохранение данных с помощью PHP
Заключение

Шаг 1: Создание формы и добавление скрипта для генерации

Начнем с создания HTML-формы и добавления JavaScript-кода, который будет отвечать за добавление новых поле

<!DOCTYPE html>
<html>
<body>
<form id="form" method="POST" action="save_data.php">
<input type="text" name="text_field[]">
<button type="submit">SUBMIT</button>
</form>
<button onclick="add_field()">ADD FIELD</button>
<script>
function add_field(){
var form = document.getElementById("form");
// Создаем новое поле ввода
var new_field = document.createElement("input");
// Устанавливаем тип данных 'text'
new_field.setAttribute("type", "text");
// Устанавливаем имя для поля ввода как элемент массива
new_field.setAttribute("name", "text_field[]");
// Определяем место вставки нового поля (перед кнопкой SUBMIT)
var submit_button = form.querySelector("button[type='submit']");
// Добавляем поле ввода в форму
form.insertBefore(new_field, submit_button);
}
</script>
</body>
</html>

Этот код создает форму с одним полем ввода и кнопкой «SUBMIT». Также есть кнопка «ADD FIELD», которая вызывает функцию add_field, добавляющую новое текстовое поле ввода перед кнопкой отправки формы.

Каждое новое поле ввода имеет имя text_field[], что определяет его как элемент массива. Это позволяет отправить все значения полей ввода как массив на сервер.

Шаг 2: Обработка и сохранение данных с помощью PHP

Теперь создадим PHP-скрипт save_data.php, который будет принимать данные формы, обрабатывать их и сохранять в базу данных:

<?php
// Подключение к базе данных
$conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME");

// Получаем данные из формы
$data = $_POST['text_field'];

// Конвертируем массив в строку, разделяя элементы запятыми
$data_string = implode(",", $data);

// Сохраняем данные в базу данных
$query = "INSERT INTO `test`(`data`) VALUES ('$data_string')";
if(mysqli_query($conn, $query)) {
echo "Success: Data successfully inserted";
} else {
echo "Error: Could not insert data into table";
}
?>

В этом скрипте:

Мы подключаемся к базе данных с помощью mysqli_connect.
Получаем массив данных из формы и объединяем его в строку с помощью функции implode, разделяя элементы запятыми.
Сохраняем строку в базу данных.

Заключение

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