Динамическое создание полей формы

@Challenger85 · Регистрация: 15.10.2015

Студворк — интернет-сервис помощи студентам

Доброго времени. Пытаюсь сделать динамическое добавление поля в форму через JS. Не работает. Подскажите пожалуйста куда копать.

Код формы с полем FieldList:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Participant(Form):
    fio = StringField('ФИО')
    position = StringField('Место')
 
 
class AddChildren(FlaskForm):
    teacher = StringField('Преподаватель')
    level = SelectField('Уровень мероприятия', choices=['Международный', 'Федеральный', 'Региональный', 'Муниципальный',
                                                        'Институциональный'])
    nomination = StringField('Номинация')
    distant = SelectField('Дистанционный', choices=['Да', 'Нет'])
    union = StringField('Объединение')
    collective = SelectField('Коллектив', choices=['Да', 'Нет'])
    place = StringField('Место проведение')
    date = StringField('Дата проведения (Пример: 20.12.2022)')
    send = SubmitField('Отправить')
    participants = FieldList(FormField(Participant), min_entries=1, max_entries=15)

JS для создания и добавления поля ввода в FieldList:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function () {
            var maxField = 15; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.wrapper'); //Input field wrapper
            var x = 0; //Initial field counter is 1
            //Once add button is clicked
            $(addButton).click(function () {
                //Check maximum number of input fields
                if (x < maxField) {
                    var fioInput = $("<input>")//New input field html
                        .attr("class", "uk-input")
                        .attr("type", "text")
                        .attr("placeholder", "ФИО участника")
                        .attr("id", "fio-" + x)
                        .attr("name", "fio-" + x);
                    x++;//Increment field counter
                    $fioInput.appendTo(wrapper);
                }
            });
        });

HTML для рендера:

HTML5
1
2
3
4
5
6
7
<div class="uk-grid uk-margin-large-bottom wrapper">
                {% for subform in form.participants %}
                {{ subform.fio }}
                {{ subform.position }}
                {% endfor %}
            </div>
<a class="add_button uk-button uk-button-default uk-width-1-1">Добавить участника</a>

@Treasure Hunter · 04.02.2022, 20:06

Ну тут не по теме. Это надо в ветку с JS. Я уж сто лет на нем ничего не делал, но вроде бы здесь $ лишний:

JavaScript
1
$fioInput.appendTo(wrapper);

@Challenger85 · 04.02.2022, 20:08 **[ТС]**

Тут проблема в том, что визуально поле добавляется, но при отправке формы ничего не приходит. Проблема в том чтобы связать JS и WTForms

@Treasure Hunter · 04.02.2022, 21:41

Тогда нужно еще код маршрута увидеть. Я так далеко вглубь Flask не залезал, но по аналогии с другими моделями скорее всего поля, отсутствующие в модели, просто не будут существовать. Т.е. поля, которых нет в форме Form или FlaskForm, надо не через форму модели доставать, а через request.form.get. Поэтому надо видеть код маршрута или blueprint, если через него сделано.

Новые блоги и статьи Все статьи Все блоги /
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

@Challenger85 1 / 1 / 1 Регистрация: 15.10.2015 Сообщений: 112
	04.02.2022, 20:08 [ТС]
	Тут проблема в том, что визуально поле добавляется, но при отправке формы ничего не приходит. Проблема в том чтобы связать JS и WTForms 0

@Treasure Hunter 155 / 120 / 38 Регистрация: 12.12.2013 Сообщений: 374
	04.02.2022, 21:41
	Тогда нужно еще код маршрута увидеть. Я так далеко вглубь Flask не залезал, но по аналогии с другими моделями скорее всего поля, отсутствующие в модели, просто не будут существовать. Т.е. поля, которых нет в форме Form или FlaskForm, надо не через форму модели доставать, а через request.form.get. Поэтому надо видеть код маршрута или blueprint, если через него сделано. 0