Resetting a form in Django using HTMX

I am working on a simple form in Django and I would like to achieve reset functionality using HTMX.. In instances where Django gives validation errors, they would go away when user clicks on "reset" button.. I dont know if there are any easier ways to do this (which i would love to listen to), but I prefer the HTMX solution as it would be of use to me later on as well..

In the below,

index.html contains the form (portfolio form).. please note, index carries a base.html which contains htmx unpkg.. portfolio-reset.html is the partials/ code that I would like HTMX to do AJAX on.. portfolio_reset is the view to fetch the PortfolioForm..

The problem I'm facing is when I run the code, the HTMX is doing a full page reload of index.html and I am not able to fetch just the portfolio-reset code to just reset the form.. Not sure where I'm going wrong.. Appreciate your help..

index.html

{% csrf_token %} {{ portfolio_form|crispy }}

                <div id="portfolio-reset" ></div>`

`

portfolio-reset.html

{% load crispy_forms_filters %} {% load crispy_forms_tags %}

<div hx-target="this" hx-swap="outerHTML">
<form>
    {% csrf_token %}
    {{ portfolio_form|crispy }}
</form>
</div>`

`

portfolio_reset view

def portfolio_reset(request): portfolio_form = PortfolioForm() context = { 'portfolio_form': portfolio_form }
return render(request, "portfolio/partials/portfolio-reset.html", context)

urls

app_name = 'portfolio' urlpatterns = [ # Portfolio app views path("index/", portfolio_list, name="index"), path("index/", portfolio_reset, name="portfolio-reset")`

]

`

Back to Top