JavaScript: динамические поля для формы

как добавить неограниченное количество полей в форму с помощью JavaScript и сохранить результат в базе данных с помощью PHP

2020-03-21 dr.Brain

время чтения 2 мин.

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

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

Создадим новую форму и добавим скрипт с функцией генерации динамический полей:

<!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 x = document.getElementById("form");
                // создаем новое поле ввода
                var new_field = document.createElement("input");
                // установим для поля ввода тип данных 'text'
                new_field.setAttribute("type", "text");
                // установим имя для поля ввода
                new_field.setAttribute("name", "text_field[]");
                // определим место вствки нового поля ввода (перед каким элементом его вставить)
                var pos = x.childElementCount;

                // добавим поле ввода в форму
                x.insertBefore(new_field, x.childNodes[pos]);
            }
        </script>
    </body>
</html>

Итак, мы создали функцию 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”.