Form.getlist () не работает с расширенной формой htmx?

У меня есть форма заказа в приложении на основе фляги. Форма начинается с одной строки, которую пользователь должен заполнить, указав название продукта и т. д.

Затем есть кнопка «Добавить элемент», которая отправляет запрос htmx. Его можно использовать для добавления неопределенного количества дополнительных строк.

Вот код:

<table class = "table" >
<thead class = "thead-dark">
    <tr>
    <th>Product Name</th>
    <th>Unit</th>
    <th>Quantity</th>
    </tr>
</thead>

<form autocomplete = "off" action = "/neworder" method = "POST">
    <tr>
    <td><input type = "text" name = "product" ></td>
    <td><input type = "text" name = "unit"></td>
    <td><input type = "text" name = "number_of_units"></td>
    </tr>

    <tr hx-target = "this">
    <td><button type = "button" hx-get = "/adminorder" hx-swap = "outerHTML" >Add Item</button></td>
    </tr>
</tbody>
</table>
   
<p>Order Date:  <input type = "text" name = "date"></p>
<input type = "submit">
</form>

htmx возвращает это:

<tr>
<td><input type = "text" name = "product"></td>
<td><input type = "text" name = "unit"></td>
<td><input type = "text" name = "number_of_units" ></td>
</tr>

<tr hx-target = "this">
<td><button type = "button" hx-get = "/adminorder" hx-swap = "outerHTML" >Add Item</button></td>
</tr>

Как видите, все входные данные в столбце имеют одно и то же имя.

Когда форма отправлена, я хочу использовать запрос фляги, чтобы сделать это:

@app.route('/neworder', methods=["POST"])
def new_order():
    ...
    order_date = request.form.get("date")
    items = request.form.getlist("product")
    return f'<html>{order_date} - {items}</html>'

Однако в items попадает только то, что было введено в первую строку... Я попытался начать с более чем одной строки, и тогда все заработало, как и ожидалось, поэтому это должно быть как-то связано с частью кода, возвращаемой htmx...

Я не думаю, что это актуально (?), но функция, используемая hx-get, выглядит просто так:

@app.route('/adminorder')
def admin_order():
    return render_template('adminorder.html')

html flask htmx

10.05.2022 15:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш HTML-шаблон недействителен, вы должны переместить открывающий тег form за пределы таблицы. Я также добавил недостающий тег <tbody>.

<form autocomplete = "off" action = "/neworder" method = "POST">
<table class = "table" >
<thead class = "thead-dark">
    <tr>
    <th>Product Name</th>
    <th>Unit</th>
    <th>Quantity</th>
    </tr>
</thead>

<tbody>
    <tr>
    <td><input type = "text" name = "product" ></td>
    <td><input type = "text" name = "unit"></td>
    <td><input type = "text" name = "number_of_units"></td>
    </tr>

    <tr hx-target = "this">
    <td><button type = "button" hx-get = "/adminorder" hx-swap = "outerHTML" >Add Item</button></td>
    </tr>
</tbody>
</table>
   
<p>Order Date:  <input type = "text" name = "date"></p>
<input type = "submit">
</form>

10.05.2022 16:45

Другие вопросы по теме

Приложение Flask вылетает с ошибкой R10 на Heroku

Как запросить один ко многим на одной странице

Как воссоздать Google Keep Note

Как предварительно выбрать определенные значения из динамически заполняемого выпадающего списка для HTML-формы?

Значение HTML по умолчанию для типа ввода переключателя на основе переменной python

Можете ли вы вернуть функцию в колбе, а также вернуть render_template?

Три модуля проекта опираются на три разные виртуальные среды

Попытка использовать изображение на веб-сайте Flask показывает только сломанный значок img

Попытка настроить flask с nginx и gunicorn

Flask выберите форму для POST, нажав кнопку

Form.getlist () не работает с расширенной формой htmx?

Ответы 1

Другие вопросы по теме

Похожие вопросы