Resetting a form in Django using HTMX

Using Django Templates & Frontend
1

Hello all, not sure if I can ask a HTMX related q here, but since it is so connected to my project in Django and the fact that I’m stuck, I am asking for help…

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”)

`

2

Side note: When posting code or templates here, surround the code/template between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code (or template), then another line of ```. This forces the forum software to keep your code properly formatted.

In general, when you’re using htmx, you want to create views and templates that will only render the html element that you wish to replace. You don’t want to re-render the entire page.

Unfortunately, because of the formatting, I can’t quite figure out what you have in order to be more specific than this. However, you may wish to review the docs for hx-target.

3

Hello Ken

Many thanks for your message… My apologies, I knew the formatting wasn’t best but was unsure how to format it… will take note of the backticks next time…

Right now, I am able to solve the current issue, hence we can consider this closed…

Best Regards