0

ユーザーが集荷と配送先住所をフォームに入力し、価格をオンラインで取得できる配送サービス Web を開発しようとしています。価格に問題がない場合、ユーザーは「注文する」ボタンをクリックして別の新しいページに移動し、ユーザーが追加情報を入力できます。重要なことに、以前に入力した配送先住所と配送先住所、および価格が自動的にどこかに表示される必要があります。新しいページ。

私はdjangoとhtmlが初めてで、同じ目的を果たすより単純なページを作成しようとしました. これで、フォーム入力の最初の部分を実行し、バックエンドがユーザー入力に基づいて計算し、計算結果 (価格など) を返すことができます。今、私は「2つの入力値と計算結果を表示する別の新しいページへのナビゲーション」をどのように行うのか疑問に思っています.

メインの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>

子 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>

ビュー.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})
4

0 に答える 0