如何在 HTML 和 Django 中连接 2 个表单？

Question

我正在创建一个网页，我想知道在按下蓝色按钮之前是否可以确保左侧的数据已填满。在左侧，您可以看到一个表格，通过输入您的地址、城市等进行支付。但在右侧，您可以看到另一个带有条纹的表格，可以用信用卡支付。我不知道如何从左侧获取数据并将其保存在数据库中，以便我可以在成功付款后创建收据。这是下面的代码。

<div class="container-2">
    <div class="gray-hover">
        <form method="POST">
            <div class="item" id="payment">
                <div class="row">
                    <h4>Možnost nakupa 1: Plačilo po povzetju <small><i>(Za plačevanje s kartico je treba izbrati samo
                                količino in vrsto izdelka!)</i></small></h4>
                    {% csrf_token %}
                    {% if form %}
                    <div class="input-group">
                        <div style="color: red;">{{ form.name.errors }}</div>
                        {{ form.name }}
                    </div>
                    <div class="input-group">
                        <div style="color: red;">{{ form.last_name.errors }}</div>
                        {{ form.last_name }}
                    </div>
                    <div class="input-group">
                        <div style="color: red;">{{ form.street_name.errors }}</div>
                        {{ form.street_name }}
                    </div>
                    <div class="input-group">
                        <div style="color: red;">{{ form.city_name.errors }}</div>
                        {{ form.city_name }}
                    </div>
                    <div class="input-group">
                        <div style="color: red;">{{ form.email.errors }}</div>
                        {{ form.email }}
                    </div>
                    <div class="input-group">
                        <div style="color: red;">{{ form.number.errors }}</div>
                        {{ form.number }}
                    </div>
                    {% endif %}

                </div>
            </div>
            <div class="item" id="payment2">
                <div class="row">

                    <div class="input-group">
                        {{ form.num_elements.errors }}
                        {{ form.num_elements }}
                    </div>
                    <div class="input-group" id="check_div">
                        <div
                            style="display: flex;width:100%;justify-content: space-between;align-items: center;font-size:medium;flex-wrap: wrap;">
                            <div style="display: flex;justify-content: space-between;margin:3px;">
                                {{ form.select_type.errors }}
                                {{ form.select_type.label_tag }}
                                {{ form.select_type }}
                            </div>

                            <div style="display: flex;justify-content: space-between;margin:3px;">
                                {{ form.select_type2.errors }}
                                {{ form.select_type2.label_tag }}
                                {{ form.select_type2 }}
                            </div>

                        </div>
                    </div>
                    <div class="input-group">
                        {{ form.warning_el.errors }}
                        {{ form.warning_el }}
                    </div>
                    <div style="display: flex;justify-content: space-between;margin: 0.5rem;">
                        <button class="button" type="submit" id="button"> Naroči <small>(povzetje)</small></button>
                        <a class="button" id="stripe-button">Plačaj s kartico!</a>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <div class="gray-hover">
        <div class="item" id="payment3" style="width:100%;">
            <h4>Možnost nakupa 2: Plačilo s kartico <small><i>(Za plačevanje s kartico je treba izbrati samo
                        količino in vrsto izdelka!)</i></small></h4>
            <div class="row" style="display: flex; justify-content: center;">
                <form id="payment-form" data-locale="si" style="width:100%;">
                    <div id="payment-element">
                        <!--Stripe.js injects the Payment Element-->
                    </div>
                    <button id="submit" class="button1">
                        <div class="spinner hidden" id="spinner"></div>
                        <span id="button-text">Plačaj</span>
                    </button>
                    <div id="payment-message" class="hidden"></div>
                </form>
            </div>
        </div>

    </div>

</div>

这是 'CONTAINER-2' 的屏幕截图

Answer 1

首先确保您所有的输入都在一种形式和一种视图下。

在您的 Django 表单中使用 required=True 以确保输入每个输入。

例如，如果您使用的是 Django 表单

from django import forms
class FooForm(forms.Form):
     email = forms.EmailField(max_length=100,required=True,
                               widget=forms.TextInput(
                               attrs={ 'required': 'true' }),
     )

在您看来使用表单 is_valid 方法

form = FooForm(request.POST)
if form.is_valid():
  # Complete Your Business Logic
  ...
  return redirect("redirect_view")
# Else Return With Error Message

使用表格保存您的数据。如果无法使用 Django 表单，则必须使用 javascript 禁用按钮，直到所有输入都未填满

如何在 HTML 和 Django 中连接 2 个表单？

How to connect 2 forms in HTML and Django?

html

css

python

django

web