[FIXED] Duplicate request with HTMX on the submit button of the form

Issue

with this code:

<button class="button is-success"
type="submit"
hx-get="{% url 'refresh_navbar' %}"
hx-target="#header"
hx-trigger="submit"                                                                              
>Login</button>

the post is executed (submited) (the post is done by the hx-post of the form actually)

and this code without the hx-trigger:

<button class="button is-success"
type="submit"
hx-get="{% url 'refresh_navbar' %}"
hx-target="#header"                                                                              
>Login</button>

executes the get request when i click in the button (but actually i want the get after the submission) and dosent execute the submission. How can i execute both requests after the form submission event.

I can't put the get in the form, because it already has another target.

<form class="form" name="form"        
            hx-post = {{request.path}} 
            hx-trigger="submit"
            hx-headers='{"X-CSRFToken":"{{ csrf_token }}"}'
            hx-target="#login-modal"                                                  
            >

Thank you guys

the full form is this, it's a modal. and the #header is in another template

<form class="form" name="form"        
            hx-post = {{request.path}} 
            hx-trigger="submit"
            hx-headers='{"X-CSRFToken":"{{ csrf_token }}"}'
            hx-target="#login-modal"                                                  
            >
                
                {% csrf_token %}
                
                <div class="field">
                    <label class="label">Email</label>
                    <div class="control">
                        {% render_field form.email class="input is-link" placeholder="[email protected]" name="email"%}
                    {% if form.email.errors %}
                        <p class="help is-danger">{{ form.email.errors|first }}</p>
                    {% endif %}
                    </div>
                </div>
                
                <div class="field">
                    <label class="label">Senha</label>
                    <div class="control">
                        {% render_field form.password class="input is-link" placeholder="*********" name="password" %}
                    {% if form.password.errors %}
                        <p class="help is-danger">{{ form.password.errors|first }}</p>
                    {% endif %} 
                    </div>
                </div>

                <div class="field">
                    <div class="control">
                        <button class="button is-success"
                        type="submit"
                        hx-get="{% url 'refresh_navbar' %}"
                        hx-target="#header"
                        hx-trigger="submit"                                                                              
                        >Login</button>                
                    </div>
                </div>
                

                <a class="is-size-8 button-unstyled has-text-link
                               login-modal-tabbable"
                               hx-get="{% url 'register' %}"
                               hx-target="#modal-register"
                               hx-trigger="click once"
                               x-cloak
                               @click.stop.prevent="modalregisteropen = !modalregisteropen">
                  Register new account
                </a>               
                  
            </form>

The login view, the form view

def user_login(request):
    # if this is a POST request we need to process the form data
    if request.method == 'POST':
        # create a form instance and populate it with data from the request:
        form = CustomAuthenticationForm(request.POST)
        
        error_messages = form.error_messages
        
        # check whether it's valid:
        if form.is_valid():
            email = form.cleaned_data['email']
            password = form.cleaned_data['password']
            
            user = authenticate(request, email=email, password=password)

            if user is not None:
                # User authenticated
                login(request, user)
                
                request.session['success_message'] = "Login bem-sucedido. Bem-vindo!"
                return HttpResponseRedirect('/')
            else:                
                # Usuário não autenticado - trate conforme necessário
                form.add_error(None, 'Credenciais inválidas. Verifique seu email e senha.')
        return render(request, 'registration/login.html', {'form': form, 'error_messages': error_messages})

Solution

For what you want to achieve, you don't need the post-submission. You just need to modify your redirect logic.

Import HttpResponse from django.http Then after you havs logged in the user,

def user_login(request:
    .... 
    response = HttpResponse()
    response["Hx-Redirect"] = "/" 
    return response

Here, you're just adding the Hx-Redirect header to the response object that tells HTMX (on the frontend) to do a page redirect to the specified url.

Answered By - McPherson