How to connect 2 forms in HTML and Django?

I am creating a web page and i’m wondering if i could make sure that the data on the left is filled before pressing the blue button. On the left you can see a form to pay by entering your address, city etc. but on the right you can see another form with stripe implemented to pay with credit card. I don’t know how to get the data from the left and save it in the database so I can create a receipt after successful payment. Here is the code down below.

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

AND HERE IS THE SCREENSHOT OF THAT ‘CONTAINER-2’

Answer

Firstly make sure all your inputs are under one form and one view.

Use required=True in your Django form in order to make sure every input is entered.

If you are using Django forms, for example

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

In your view use the form is_valid method

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

Use the form to save your data. If using Django form is not an option, you have to use javascript to disable the button until all inputs are not filled up