使用 HTMX 触发器在页面加载时提交表单会中断后续提交

Question

我有一个小型 Flask 应用程序，它使用 HTMX 处理表单输入并在同一页面上显示结果。当页面加载时，默认表单值用于计算结果。这是通过表单上的 hx-trigger="load" 完成的。但是，如果将新值输入到表单并提交，则结果不会更新。如果我从表单中删除 hx-trigger="load" ，一切正常，但在页面首次加载时不会提交表单。如何使用 HTMX 在页面加载时提交表单以及在单击“提交”按钮时提交表单？

烧瓶app.py如下。

from flask import Flask
from flask import render_template
from flask import request

app = Flask(__name__)

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

@app.route('/results', methods=['POST'])
def results():
    values = request.form['values']
    multiplier = request.form['multiplier']

    vals = list(map(int, values.split(', ')))
    mult = int(multiplier)

    y = []
    for val in vals:
        y.append(val * mult)

    return render_template('results.html', results=y)

index.html 模板如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Home Page</title>
</head>
<body>
    <div class="container">
        <div class="row">

            <div class="col">
                <h1 class="mt-3">Submit values</h1>

                <p>Input using comma separated values then click the submit button to see results.</p>

                <form hx-post="/results" hx-target="#results" hx-trigger="load">
                    <div class="mb-3">
                        <label for="values" class="form-label">Values</label>
                        <input type="text" class="form-control" style="max-width:200px;" name="values" value="1, 2, 3, 4, 5">
                    </div>
                    <div class="mb-3">
                        <label for="multiplier" class="form-label">Multiplier</label>
                        <input type="text" class="form-control" style="max-width:200px;" name="multiplier" value="3">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>

            <div class="col">
                <div id="results"></div>
            </div>

        </div>
    </div>

    <script src="https://unpkg.com/htmx.org@1.6.1" integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW" crossorigin="anonymous"></script>

</body>
</html>

results.html 模板如下所示。

<h1 class="mt-3">Results</h1>

<p>Below are the results using the form inputs.</p>

{{ results }}

Answer 1

当您为 HTMX 提供触发事件时，默认的将被替换。对于表单元素，默认事件是 submit。幸运的是 HTMX support multiple triggers，我们只需要用逗号分隔它们。所以，只要在hx-trigger属性中加上submit，HTMX就会再次监听提交事件：

<form hx-post="/results" hx-target="#results" hx-trigger="submit, load">

使用 HTMX 触发器在页面加载时提交表单会中断后续提交

Submitting form on page load using HTMX trigger breaks subsequent submits

python

flask

htmx