Discussion :

[JeanPPPP]

Bonjour à tous,

Je suis actuellement bloqué sur une étape de mon projet.

Pour être simple, je souhaite faire en sorte d'envoyer plusieurs formulaires différents à la suite. Par exemple, si j'ai deux formulaires, lors de la validation du premier formulaire, ce dernier envoi les informations en arrière-plan tout en restant sur la page ou d'autres formulaires sont présents.

Voici une illustration :




Ainsi, lorsque le premier formulaire est envoyé, un loader se lance le temps que l’exécution du premier formulaire se fasse. En revanche si je lance le deuxième formulaire alors que le premier n'est pas fini faire en sorte d'avoir une liste d'attente.

Voici le code des formulaires :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
        <form id="1" autocomplete="off" action="" method="post">
            <div id="form">
                <div>
                    <label>Type</label>
                    <input id="" type="text" value="" name="" placeholder="" size="15">
                </div>
                <div>
                    <label>Country</label>
                    <input id="" type="text" value="" name="country" placeholder="" size="15 " required>
                </div>
            </div>
            <div class=""><input id="Script_run" name="submit" type="submit" value="Generate"></div>
        </form>
        <form id="2" autocomplete="off" action="" method="post">
            <div id="form">
                <div>
                    <label>Type</label>
                    <input id="" type="text" value="" name="" placeholder="" size="15">
                </div>
                <div>
                    <label>Country</label>
                    <input id="" type="text" value="" name="country" placeholder="" size="15 " required>
                </div>
            </div>
            <div class=""><input id="Script_run" name="submit" type="submit" value="Generate"></div>
        </form>

Du coup, comment puis-je mettre en place la soumission des formulaire un à un ? Comment faire en sorte d'avoir un loader ?

Je ne suis pas certain que cela soit faisable en PHP, j'espère que vous pourrez m'aider.

Merci et bonne journée.

[CosmoKnacki]

Pour faire ça tu dois utiliser ajax. Concrètement, ça revient à déclencher un script javascript (donc coté client) qui va envoyer des données à un script PHP (coté serveur) et récupérer la réponse de ce dernier, en évitant ainsi le rechargement de la page. Il y a pas mal de tutoriels sur le sujet.

[JeanPPPP]

Je viens de suivre votre conseil mais je me retrouve bloqué.

Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script src="./script/duplicate.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("form").on("submit", function(event){
        event.preventDefault();
 
        var formValues= $(this).serialize();
 
        $.post("./generate/create.php", formValues, function(data){
            // Display the returned data in browser
            $("#form").html(data);
        });
    });
});
</script>
<button style="margin: 2px 50px 20px 20px;" id="button" onlick="duplicate()">ADD</button>
<div>
    <div class="copycat" id="form">
        <form id="duplicater" autocomplete="off" action="" method="post">
            <div class="wpsl-input">
                <div>
                    <label>Type</label>
                    <input id="" type="text" value="" name="" placeholder="" size="15">
                </div>
                <div>
                    <label>Country</label>
                    <input id="" type="text" value="" name="country[]" placeholder="" size="15 " required>
                </div>
                <div>
                    <label>Shop</label>
                    <input type="text" name="shops_to_include[]" id='to_exclude' placeholder="" size="15">
                </div>
                <div>
                    <label>Critere</label>
                    <input type="text" name="to_exclude[]" id='to_exclude' placeholder="" size="15">
                </div>
                <div>
                    <label>Name File</label>
                    <input type="text" name="name_file[]" id='name_file' placeholder="" size="15">
                </div>
                <div>
                    <label>Name Repository</label>
                    <input type="text" name="name_repertory[]" id='name_repertory' placeholder="" size="15">
                </div>
                <div>
                    <label>Export Link</label>
                    <input type="text" name="export_link[]" id='export_link' placeholder="" size="15">
                </div>
            </div>
            <div class=""><input style="margin-top: 30px;" id="Script_run" name="submit" type="submit" value="Generate"></div>
        </form>
    </div>
</div>
 
<script src="./script/duplicate.js"></script>

Pour duplicate.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
document.getElementById('button').onclick = duplicate;
 
 
var i = 0;
var original = document.getElementById('duplicater');
 
function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

Dans create.php je récupére les informations de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
foreach ($_POST['shops_to_include'] as $numberOfElement => $shop) {
    $toexclude = $_POST['to_exclude'][$numberOfElement];
    $namefile = $_POST['name_file'][$numberOfElement];
    $namerepository = $_POST['name_repertory'][$numberOfElement];
    $exportlink = $_POST['export_link'][$numberOfElement];
    $country = $_POST['country'][$numberOfElement];

Le problème : j'arrive à faire générer mon premier formulaire mais lorsque je veux lancer le deuxième alors cela ne passe pas. Comment puis-je le corriger ?
De plus, lorsque create.php se lance alors sur la page des formulaires tout disparait et j'ai uniquement un vide. Il m'est donc impossible de dupliquer des formulaires ou même d'afficher celui de base.

[CosmoKnacki]

Partie html:

• Avoir des attributs id dans la partie que tu comptes cloner, c'est plus une gêne qu'autre chose. Ça t'oblige à cette numérotation dont tu peux trés bien te passer en t'appuyant sur les sélécteurs.
• Tu colles des divs à qui mieux mieux, une balise div à un sens: c'est une division de ta page ou si on fait abstraction de l'aspect visuel, qui peut changer du tout au tout avec les styles css, c'est une division dans tes données. En pratique si tu ne peux pas donner un sens à cette division, c'est qu'elle est inutile ou inappropriée.
• Un formulaire est une liste de champs à remplir, pourquoi ne pas utiliser ul et li plutôt que des divs?
• La balise label se connecte de deux manières à un élément de formulaire:
  1. soit tu relies le label avec son attribut for vers l'id de ton élément.
  2. soit tu englobes l'élément dans ta balise label.
  
  Comme tu dois éviter les ids la deuxième solution est plus pratique.
• Bien entendu pour alléger le code html, déporte tout ce qui est style inline vers un feuille de style et remplace tout attribut de type onclick, onchange, onbidule par des gestionnaires d'événements avec addeventlistener.

Partie Javascript:

• Le mélange jQuery/Vanilla Javascript ne fait pas toujours bon ménage, mieux vaut opter soit pour l'un, soit pour l'autre. À noter que s'il y a quelques années jQuery semblait indispensable, c'est beaucoup moins le cas désormais avec le bond qu'a fait Javascript depuis la spécification ES2015.

• Code jQuery :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  $.post("./generate/create.php", formValues, function(data) {
      // Display the returned data in browser
      $("#form").html(data);

  En faisant ça, tu écrases tout le contenu html de div#form (donc les formulaires) avec les données renvoyées par create.php, c'est sûrement pour ça que tu obtiens une page blanche.

• Code html :

  Sélectionner tout - Visualiser dans une fenêtre à part

  <script src="./script/duplicate.js"></script>

  Ce script contient des références à des éléments de ta page. Or si tu places ce script en début de page, rien ne prouve que les éléments auquels il fait référence existent déjà. Donc soit tu le places en fin de script, soit tu encapsules ton script dans une fonction qui est déclenchée lorsque l'arbre DOM est disponible.
  C'est précisément ce que fait ton code jQuery avec $(document).ready(function() { /* ... */ });, en Vanilla Javascript ça donne: document.addEventListener("DOMContentLoaded", function() { /* ... */ });
• Je ne sais pas si tu les utilises déjà mais les navigateurs fournissent des outils de développement (touche F12) dont une console Javascript sur laquelle tu peux afficher n'importe quoi grâce à console.log().

Voici une version réécrite: j'ai inséré le Javascript directement dedans, libre à toi de le placer dans un fichier. Pour ce qui est de l'appel ajax, il se contente d'afficher le code statut de retour dans la console regarde la page à propos d'ajax de MDN (mozilla developper network) pour la suite des opérations. Dans un premier temps limite le code de create.php à un simple echo json_encode($_POST); puis affiche le retour de l'appel ajax dans la console afin de vérifier que le courant passe bien.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
 
<script>
'use strict';
 
document.addEventListener("DOMContentLoaded", function() {
 
    const forms = {
        init() {
            const original = document.querySelector('#forms form'),
                  button = document.getElementById('button');
            button.addEventListener('click', this._add, false);
            original.addEventListener('submit', this._send, false);
        },
        
        _add() {
            const original = document.querySelector('#forms form');
            const form = original.cloneNode(true);
            original.parentNode.appendChild(form);
            form.reset();
            form.addEventListener('submit', this._send, false);
        },
        
        _send(e) {
            e.preventDefault();
            const xhr = new XMLHttpRequest();
            xhr.open('POST', './generate/create.php', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    console.log(xhr.status);
                }
            };
            xhr.send(new FormData(e.target));
        }
    };
    
    forms.init();
});
</script>
 
<style>
* { font-family: monospace; }
#button { margin: 2px 50px 20px 20px; }
.wpsl-input { list-style-type: none; }
.wpsl-input li { display: inline; }
</style>
</head>
<body>
 
<button id="button" onlick="duplicate()">ADD</button>
 
<div class="copycat" id="forms">
    <form autocomplete="off" action="" method="post">
        <ul class="wpsl-input">
            <li>
                <label>Type <input type="text" name="type" size="15" /></label>
            </li>
            <li>
                <label>Country <input type="text" name="country" size="15" required></label>
            </li>
            <li>
                <label>Shop <input type="text" name="shops_to_include" size="15"></label>
            </li>
            <li>
                <label>Critere <input type="text" name="to_exclude" size="15"></label>
            </li>
            <li>
                <label>Name File <input type="text" name="name_file" size="15"></label>
            </li>
            <li>
                <label>Name Repository <input type="text" name="name_repertory" size="15"></label>
            </li>
            <li>
                <label>Export Link <input type="text" name="export_link" size="15"></label>
            </li>
        </ul>
        <input name="submit" type="submit" value="Generate">
    </form>
</div>
</body></html>

Suggestion: pourquoi ne pas retirer le bouton ADD et générer un nouveau formulaire une fois la requête ajax réussie?