django html: copy form input data and display in another page

1 year ago

#63643

Jack

I am trying to develop a delivery service web where users can input pickup and delivery address in the form and get the price online. if the price is fine, the user can click "place order" button which will navigate into another new page for user to fill in additional information, and importantly the previously input piackup and delivery addresses and the price will need to automatically shown somewhere in the new page.

I am new to django and html, and I have tried to created a simpler page serving the same purpose. Now I could do the first part of form filling, and the backend calculate based on the user input and return the calculation result (e.g. price). Now, I am wondering how to do the "navigation to another new page which will display the two input values and calculation result"

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/htmx.org@1.6.1"></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})

html

django

forms

htmx

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs