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

@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, если через него сделано.

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@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