'Online pricing/ordering web with django: display/show a button aftern form submitted

I am working on a online pricing/ordering web. after user input some required data and click "get price", the form is submitted and the page will show the price at the bottom of the page (currently achieved as shown in below demo code).

Next, I want the page also display a button called "order now" on the right side of the price. If user click it, the page will navigate to another page where user can input more data for order information, and also auto-display the price and other already inputed data shown in the previous page.

Main html:

<html>
    <body>
        <form method="POST" hx-post="{% url 'blog:post_list' %}" hx-target="#num_1" hx-target="#num_2" hx-target="#result">
            {% csrf_token %}
            <div>
            <label>num_1:</label>
            <input type="text" name="num_1" value="" placeholder="Enter value" />
            </div>
            <div>
            <label>num_2:</label>
            <input type="text" name="num_2" value="" placeholder="Enter value" />
            </div>

            <br />
            <div id="num_1">{{ num_1 }}</div>
            <br />
            <div id="num_2">{{ num_2 }}</div>
            <br />
            <div id="result">{{ result }}</div>
            <br>
            <button type="submit">Submit</button>
        </form>
        <script src="https://unpkg.com/[email protected]"></script>
    </body>
</html>

Child html:

<div>
        <label>first_number:</label>
        <span id="num_1"> {{ num_1 }} </span>
</div>

<div>
        <label>second_number:</label>
        <span id="num_2"> {{ num_2 }} </span>
</div>

<div>
        <label>calculation_result:</label>
        <span id="result"> {{ result }} </span>
</div>

view.py:

def post_list(request):
    result = ""
    num1 = ""
    num2 = ""
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)

    if request.headers.get('Hx-Request') == 'true':
        # return only the result to be replaced
        # return HttpResponse(str(result))
        return render(request, 'blog/post_list_snippet.html', {'num_1': num1,'num_2': num2,'result': result})
    else:
        return render(request, 'blog/post_list.html', {'num_1': num1,'num_2': num2,'result': result})
htmldjangoformshtmx


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions