Traiter 2 formulaires de la même page avec un seul fichier ACTION

Bonsoir à tous.

J'avais déjà mes formulaires HTML (input et select) dont le Fichier PHP de l'ACTION de la Balise "form" se nomme "treatment.php".

Puis j'ai décidé de lui ajouter un autre de Stripe Elements (Librairie JS de la passerelle de paiement STRIPE - https://github.com/stripe/elements-examples/#example-5).

Mais le Problème est que lorsque je clique sur le bouton "Pay $25", l'ACTION de la 1ère Balise "form" (puisque le code contient 2 balise "form") qui se nomme "treatment.php" ne s'exécute pas. En fait, rien ne s'exécute.

Comment donc permettre au bouton "Pay $25" de traiter l'ACTION de la Balise "form" se nomme "treatment.php" lorsque je clique là-dessus ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div class="col-md-5 col-md-offset-1">
<form class="signup-form" action="treatment.php" method="POST">
<h2 class="text-center">Order</h2>
<hr>
<div class="form-group">
<input class="form-control" type="string" name="numField" id="numField" placeholder="N°1" required="required" />
</div>
<div class="form-group">
<input class="form-control" type="string" name="numLength" id="numLength" placeholder="N°2" required="required" />
</div>
<div class="form-group">
<select class="form-control" name="fileExt" required="required">
<option value="">Sélectionner le Type de Fichier à générer</option>
<option value=".txt">.txt</option>
<option value=".csv">.csv</option>
<option value=".xls">.xls</option>
<option value=".xlt">.xlt</option>
<option value=".xlsm">.xlsm</option>
<option value=".xlsx">.xlsx</option>
<option value=".xlsb">.xlsb</option>
<option value=".xml">.xml</option>
<option value=".xltm">.xltm</option>
<option value=".xltx">.xltx</option>
<option value=".xltm">.xltm</option>
<option value=".xlam">.xlam</option>
<option value=".xla">.xla</option>
<option value=".xlw">.xlw</option>
<option value=".xlr">.xlr</option> 
</select>
</div>
<!--<div class="form-group text-center">-->
<!--<button type="submit" class="btn btn-blue btn-block">Start Now</button>-->
<!--</div>-->
</form>
<div class="globalContent">
<main>
<section class="container-lg">
<!--Example 5-->
<div class="cell example example5" id="example-5">
 
<form>
<div id="example5-paymentRequest">
<!--Stripe paymentRequestButton Element inserted here-->
</div>
<div class="row">
<div class="field">
<fieldset>
<legend class="card-only" data-tid="elements_examples.form.pay_with_card">Pay with card</legend>
<div id="example5-card" class="input"></div>
</div>
</div>
<button type="submit" data-tid="elements_examples.form.pay_button">Pay $25</button>
</fieldset>
<div class="error" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
<path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
<path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
</svg>
<span class="message"></span></div>
</form>

Merci de m'aider s'il vous plaît.

Ce que tu essaie de faire n'est pas cohérent avec les règles d'utilisation du HTML.

En HTML, la première fonction d'un formulaire, c'est d'envoyer des données au serveur pour qu'il les traites et qu'il renvoie une nouvelle page HTML en fonction des données qu'il à reçu et traitées.

Les histoires de mise en page avec la balise <form > , c'est juste secondaire, tu peux mettre des <input> dans un <div> et reproduire la même présentation CSS.

Donc si tu a 2 ou milles balises <form > elles fonctionneront toute indépendamment les unes des autres et chacune d'elle ne sera capable que de fournir ses propres <input> au serveur en se fichant complètement ce qui peut exister comme information dans les autres formulaires présents sur la page.

Un formulaire = un bouton submit => 2 balises form = 2 boutons submit dans chacun des forms.
Et pour conseil j'te dirais de créer une page de traitement par form je fais pas trop de backend mais si on a un form c'est pour une utilisation précise. Et si tu veux que les 2 formulaires soient traités dans une seule page pourquoi ne pas en faire un seul ?