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 >
    <div >
        <form method="POST">
            <div  id="payment">
                <div >
                    <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 >
                        <div style="color: red;">{{ form.name.errors }}</div>
                        {{ form.name }}
                    </div>
                    <div >
                        <div style="color: red;">{{ form.last_name.errors }}</div>
                        {{ form.last_name }}
                    </div>
                    <div >
                        <div style="color: red;">{{ form.street_name.errors }}</div>
                        {{ form.street_name }}
                    </div>
                    <div >
                        <div style="color: red;">{{ form.city_name.errors }}</div>
                        {{ form.city_name }}
                    </div>
                    <div >
                        <div style="color: red;">{{ form.email.errors }}</div>
                        {{ form.email }}
                    </div>
                    <div >
                        <div style="color: red;">{{ form.number.errors }}</div>
                        {{ form.number }}
                    </div>
                    {% endif %}

                </div>
            </div>
            <div  id="payment2">
                <div >

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

    </div>
    <div >
        <div  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  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" >
                        <div  id="spinner"></div>
                        <span id="button-text">Plačaj</span>
                    </button>
                    <div id="payment-message" ></div>
                </form>
            </div>
        </div>

    </div>

</div>

AND HERE IS THE SCREENSHOT OF THAT 'CONTAINER-2'

CodePudding user response：

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