'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' enter image description here



Sources

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

Source: Stack Overflow

Solution Source