form.getlist() 不适用于 htmx 展开形式？

Question

我在基于烧瓶的应用程序中有一个订单。表单以单行开始，供用户填写产品名称等。

然后有一个发送 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 returns 这个:

<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>

如您所见，一列中的所有输入都具有相同的名称。

表单提交时，我想用flask request来做：

@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')

Answer 1

您的 HTML 模板无效，您应该将 form 开始标记移到 table 之外。我还添加了一个缺失的 <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>

form.getlist() 不适用于 htmx 展开形式？

form.getlist() not working on htmx expanded form?

html

flask

htmx