Django - Conditional Rendering In Templates

Question

I need some help conditionally rendering data in a modal pop up window on my site.

What I want to do: When the user clicks on the "make reservation" button, I want to display this in the modal window

<h3 style="margin-top:20px;">Choose dates</h3>
                    <div style="margin-top:20px;" class="pick-dates-div">
                        <form method="GET" class="post-form">{% csrf_token %}
                            {{ form.as_p }}
                            <button type="submit" class="form-btn save btn btn-default">Make A Reservation</button>
                        </form>
                        <button style="margin-top: 25px;" class="btn-primary btn-block btn-lg" data-toggle="modal"
                            data-target="#inquiryModal">More
                            Questions ?</button>
                    </div>

Then the user can pick the dates from the date picker and press the "make a reservation" button ( which is a GET request ), the page refreshes and I want to display only this in the same modal window:

<h1>Start Date: {{ date_start }}</h1>
    <h1>End Date: {{ date_end }}</h1>
    <h1>Price Per Day: ${{ price_per_day }}$</h1>
    <h1>Total: ${{ total_price }}$</h1>
    <form method="POST" class="post-form">{% csrf_token %}
        {{ form.as_p }}
       <a href=""> <button href="www.facebook.com" type="submit" class="form-btn save btn btn-default">Confirm Reservation</button></a>
    </form>

After that the user submits the form ( POST request ) and I want to display a text:

<h3> Thank you for your reservation </3>

What would be the ideal way to achieve this? Thank you stack

Answer 1

The ideal way to achieve this is by using JavaScript.

One of the many methods this could be achieved is by rendering all the three views inside separate containers in a modal and then hiding the next two using javascript.

You can use element.style.display = 'none' to hide and element.style.display = 'block' to show the content inside the element container.

Once the user clicks on "make reservation" button, hide/show the required containers to achieve the desired result.

Do not forget to secure your website by using proper validation on the server end. Hope that helps!