PayPalGitHub

Form Builder

Вспомогательные компоненты
Разделитель
Заголовок

Заголовок

Компоненты ввода
Кнопки
Элементы управления формой
Таблицы
Обычная таблица
Заголовок 1 Заголовок 2 Заголовок 3
Данные 1 Данные 1 Данные 1
Данные 2 Данные 2 Данные 2
Данные 3 Данные 3 Данные 3
Полосатая таблица
Заголовок 1 Заголовок 2 Заголовок 3
Данные 1 Данные 1 Данные 1
Данные 2 Данные 2 Данные 2
Данные 3 Данные 3 Данные 3

Предпросмотр формы

Разметка HTML

События JavaScript 

                            
function collectFormData(form) {
    const inputs = form.elements;
    let formData = {};

    for (let i = 0; i < inputs.length; i++) {
        const input = inputs[i];
        if (!input.name || input.type === 'submit' || input.type === 'button') continue;

        if (input.type === 'checkbox' || input.type === 'radio') {
            if (input.checked) {
                if (formData[input.name] && Array.isArray(formData[input.name])) {
                    formData[input.name].push(input.value);
                } else if (formData[input.name]) {
                    formData[input.name] = [formData[input.name], input.value];
                } else {
                    formData[input.name] = input.value;
                }
            }
        } else {
            formData[input.name] = input.value;
        }
    }

    return formData;
}

document.addEventListener('DOMContentLoaded', (event) => {
    const formElement = document.getElementById('');
    if (formElement) {
        formElement.addEventListener('submit', function (event) {
            event.preventDefault();
            const formData = collectFormData(formElement);
            console.log(JSON.stringify(formData));
            let formResultsArray = [];
            formResultsArray.push(formData);
            console.log(formResultsArray);
        });
    } else {
        console.error('Не найдены элементы формы!');
    }
});