Submitting Forms in Django HTMX - Database is not updated

[colina83]

HI all,

I followed several examples from different tutorials, and I can't get why this is not working.

I have an HTML page (see code below), and uses HTMX to add a form from another HTML page:

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}Client Information {% endblock %}

{% block content %}
  <h1> Add Lead to Sales Forecast </h1>
  <p>Click the Button below to add a Payment Date</p>


    <button type="button" hx-get="{% url 'lead_entry_forecast' %}" hx-target="#leadform" hx-swap="beforeend" >
        Add Lead  </button>

    <div id="leadform">

    </div>
     <script>
        document.body.addEventListener('htmx:configRequest', (event) => {
            event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
        })
    </script>


{% endblock %}

My form is inside this HTML, and essentially every time you click the button on the first page there are several forms submitted, the main problem is that when I submit the data, it seems like it works but it actually doesn't save the form data.

You usually do this in the Django view, and all the examples I have seen work in this way but not sure if there is anything that has to be added in the HTML code to submit the data

Django Views

## THIS VIEW PRESENTS THE FIRST HTML CODE
@login_required
def add_to_forecast(request):
    id = request.GET.get('project_id')
    request.session['lead_id'] = id
    return render(request, 'account/lead_forecast.html')

## THIS GENERATES THE FORM
@login_required
def forecast_form(request):
    if request.method=='POST':
        form = LeadEntryForm(data=request.POST)
        if form.is_valid():
            form.save()
            messages.success(request,"Successful Submission")
            return redirect('add_to_forecast')

    lead_id = request.session['lead_id']
    data = {'lead_id':lead_id}

    context = {
        "form":LeadEntryForm(initial=data)
    }
    return render(request, 'account/lead_entry_forecast.html', context)
    

Any ideas will be highly appreciated

[dz4k]

You are using the hx-get attribute, which will perform a request with the HTTP GET method:

<button type="button" hx-get="..." >

In HTTP, using GET to add, remove or change something is considered incorrect. Your Python code recognizes that and only saves the form when the POST method is used:

if request.method=='POST':
    form = LeadEntryForm(data=request.POST)
    # ... validate and save form ...
 # if not POST, do not save

To send a request with the appropriate method, replace hx-get with hx-post. htmx also has hx-put, hx-delete and hx-put which work the same way.

[colina83]

Actually, I fix this a couple of days ago, as I was simply using the wrong view to Post the data:

After:

@login_required
def add_to_forecast(request):
    form = LeadEntryForm(data=request.POST or None)
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            return HttpResponse("Success")
        else:
            return render(request, 'account/lead_entry_forecast.html', {"form": form})

    id = request.GET.get('project_id')
    request.session['lead_id'] = id
    return render(request, 'account/lead_forecast.html')


@login_required
def forecast_form(request):
    lead_id = request.session['lead_id']
    data = {'lead_id':lead_id}
    context = {
        "form":LeadEntryForm(initial=data)
    }
    return render(request, 'account/lead_entry_forecast.html', context)

Before

## THIS VIEW PRESENTS THE FIRST HTML CODE
@login_required
def add_to_forecast(request):
    id = request.GET.get('project_id')
    request.session['lead_id'] = id
    return render(request, 'account/lead_forecast.html')

## THIS GENERATES THE FORM
@login_required
def forecast_form(request):
    if request.method=='POST':
        form = LeadEntryForm(data=request.POST)
        if form.is_valid():
            form.save()
            messages.success(request,"Successful Submission")
            return redirect('add_to_forecast')

    lead_id = request.session['lead_id']
    data = {'lead_id':lead_id}

    context = {
        "form":LeadEntryForm(initial=data)
    }
    return render(request, 'account/lead_entry_forecast.html', context)