Submitting form on page load using HTMX trigger breaks subsequent submits-CodePudding

I have a small Flask app that processes form input and displays the results on the same page using HTMX. When the page loads, the default form values are used to calculate the results. This is done with hx-trigger="load" on the form. But if new values are input to the form and submitted, then the results do not update. If I remove the hx-trigger="load" from the form, everything works fine but the form does not get submitted when the page first loads. How can I use HTMX to submit the form when the page loads as well as submit the form when the "Submit" button is clicked?

The Flask app.py is given below.

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)

The index.html template is shown below.

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Home Page</title>
</head>
<body>
    <div >
        <div >

            <div >
                <h1 >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 >
                        <label for="values" >Values</label>
                        <input type="text"  style="max-width:200px;" name="values" value="1, 2, 3, 4, 5">
                    </div>
                    <div >
                        <label for="multiplier" >Multiplier</label>
                        <input type="text"  style="max-width:200px;" name="multiplier" value="3">
                    </div>
                    <button type="submit" >Submit</button>
                </form>
            </div>

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

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]" integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW" crossorigin="anonymous"></script>

</body>
</html>

The results.html template is shown below.

<h1 >Results</h1>

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

{{ results }}

CodePudding user response：

When you provide a trigger event for HTMX, the default one is replaced with it. For a form element, the default event is the submit. Fortunately HTMX support multiple triggers, we just have to separate them by commas. So, just add submit to the hx-trigger attribute and HTMX will listen to submit events again:

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