'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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

