htmx and forms

Using Django Forms & APIs
1

Hi all, django noob here,
i am trying to render a set of forms, each form will be one record of a table with some of the fields being foreign keys on other tables. i’d expect them to display as drop down. at the same time i want every time the user makes a change to one of the form fields and exits the input box to validate and save the specific form and re-render the forms. no submit button.

i managed to do all this with a submit button on each form but when i remove it and add htmx to do it my foreign keys display as values as in my understanding the hx trigger must be on the input box

any pointers?
thx

2

I’m not sure I’m following what the question is here. But from what I think you’re asking, yes, you would add the hx-post (or hx-get) on every element needing to trigger an event.

See the example at </> htmx ~ Examples ~ Inline Validation

3

thx for the reply.
The problem is that when i do something like this:

<form method="post" action="{% url 'update_transaction' form.instance.id %}">
{% for field in form %}
    <td>
        <input type="text" 
                name="{{ field.html_name }}" 
                value="{{ field.value }}" 
                hx-post="{% url 'update_transaction' form.instance.id %}" 
                hx-trigger="change blur" 
                hx-target="#transactions-list" 
                hx-swap="innerHTML">
    </td>
{% endfor %}

<script>
    document.addEventListener('htmx:configRequest', (event) => {
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        event.detail.headers['X-CSRFToken'] = csrfToken;
    });
</script>

A it doesn’t seem to trigger at all,
B the fields that are foreign keys or options render as values of course (not as dropdowns)

when i do something like this:

<form method="post">
      {% csrf_token %}
            {% for field in form %}
                <td>
                    {{ field }}
                </td>
       {% endfor %}
</form>

The foreign keys render ok but now i can’t add hx- tags in the input level and trigger doesn’t get inherited if i add in the form level

The only thing that worked is the second case with submit button in the form, which i would like to avoid

4

The modifier is changed, not change, and blur is not a defined modifier.
Also note that in the referenced example, there isn’t an hx-trigger attribute defined. (It may not be needed here.)

If this is how you’re rendering them, it makes sense. You’re rendering this as an input field and not a select. You would need to render the field as a select with the hx-post on the select. (Note, there are a lot of these attributes that can be added as custom attributes on the standard widgets. You don’t need to render all this from scratch.)

Also note that since you’re using the same target for every field, it’s going to be up to you to identify which field is being submitted. This isn’t going to submit the entire form - only the field triggering the event. If you’re handling these fields individually, you’re probably going to want to do something (like create a url with a parameter or even separate views) to handle these posts.