# Django and HTMX - A Lovely Couple

Django is a popular Python web framework that follows the model-template-view (MVT) architectural pattern. It provides a powerful and flexible way to build web applications, with features like URL routing, database integration, and a templating engine.

`htmx` is a library that allows you to add dynamic behavior to your web pages using HTML attributes. It enables you to update parts of a web page without having to refresh the entire page or write a lot of JavaScript code. It works by sending small, targeted requests to the server and updating only the relevant parts of the page with the server's response.

Django and `htmx` can work together to create highly dynamic and interactive web applications. `htmx` can be used to add dynamic behavior to Django's HTML templates, such as updating a list of items without refreshing the page, or adding a new item to a form without having to navigate away from the page.

One popular `htmx` feature is its ability to easily handle form submissions with minimal JavaScript code. With `htmx`, you can submit a form using an HTTP request, and the server can return a partial HTML response that updates only the relevant parts of the page.

### Setup

1. Include HTMX CDN in Django template.
    
    ```javascript
    <script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.8.6/htmx.min.js" integrity="sha512-SqV24lSRcthd1Bg0Obg/W/qWhKdSsQPIV342MQd8qDeeY/gJt+2qmsLhutblQNDuUx0Xs2Jh7D8m+7S1b0wQyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    ```
    
2. Install `django-htmx` for better handling of HTMX requests.
    
    ```plaintext
    pip install django-htmx
    ```
    
3. Next, you need to add `'django_htmx'` to your `INSTALLED_APPS` list in your Django project's [`settings.py`](http://settings.py) file:
    
    ```python
    INSTALLED_APPS = [
        # ... other apps ...
        'django_htmx',
    ]
    ```
    
4. Include `django_htmx.middleware.HtmxMiddleware` in `MIDDLEWARE` list in your Django project's `settings.py` file.
    
    ```python
    MIDDLEWARE = [
        # ... other middlewares ...
        "django_htmx.middleware.HtmxMiddleware",
    ]
    ```
    
5. Also, include `{% django_htmx_script %}` in django template.
    
    ```xml
    {% django_htmx_script %}
    ```
    

Now you're ready to use HTMX in templates.

### Form submission

To submit a form using Django and htmx, you can follow these steps:

1. Add the `hx-post` attribute to the `<form>` tag in your HTML template. This will tell htmx to submit the form using an AJAX request instead of a full page reload. You can also add the `hx-target` attribute to specify where the server response should be inserted. For example:
    
    ```xml
    <form action="{% url 'my_view' %}" method="POST" hx-post hx-target="#form-container">
        {% csrf_token %}
        <!-- form fields go here -->
        <button type="submit">Submit</button>
    </form>
    <div id="form-container">
        <!-- server response will be inserted here -->
    </div>
    ```
    
2. In your Django view function, you can check if the request method is `POST` and handle the form submission accordingly. You can use the `render` function to render a template with the server response. For example:
    
    ```python
    from django.shortcuts import render
    
    def my_view(request):
        if request.method == 'POST':
            # handle form submission
            # ...
            # render the response
            return render(request, 'response_template.html',    {'message': 'Form submitted successfully!'})
        else:
            # render the form
            return render(request, 'form_template.html')
    ```
    
3. Create a new HTML template for the server response, and include the response message or data. For example:
    
    ```xml
    <p>{{ message }}</p>
    ```
    

That's it! When the user submits the form, `htmx` will send an AJAX request to your Django view function, and the server response will be inserted into the specified target element without a full page reload.