[jQuery][Débutante] Générateur de formulaires

**Romenag** · 30/08/2017, 21h21

Bonjour,

Je suis débutante en programmation, j'ai suivi quelques cours sur Javascript, et là je tente de m'initier à JQuery.
Pour un TP trouvé en ligne, je dois créer un générateur de formulaires.
J'ai plus ou moins réussi à coder ce générateur, enfin... disons que j'ai une base...
Je bloque car tout mes label et input s'affiche sur la même ligne alors que je voudrais qu'ils s'affiche les uns en dessous des autres mais je ne sais pas comment faire.

Voici mon 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button>Label</button>
      <button>Zone de texte</button>
      <button>Bouton</button><br><br>
    </div>
 
    <script src="../JQUERY/jQuery.js"></script>
    <script src="../JAVASCRIPT/activite.js"></script>
  </body>
</html>

et jQuery:

Code :

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
$(function(){
 
    var coteG = $("#gauche");
    var coteD = $("#droite");
 
    //Ajoute un FORM à gauche:
    var formGauche = $("<form></form>").appendTo(coteG);
    formGauche.css("margin-top", "50px");
 
    //AJOUTE UNE SEPRATION A DROITE
    coteD.append("<hr>");
 
 
 
    //REACTION AU CLIC SUR LE BOUTON LABEL
    $("#droite button:first").on("click", function(){
 
 
        coteD.append("<div id='labelElmt'> <p>Texte du label: <input type='text' id='inputLabel' > <button id='boutonOK'> OK </button> </p> </div>");
 
        //REACTION AU CLIC SUR BOUTON VALIDER
        $("#boutonOK").on("click", function(){
            //sauvegarde la valeur de l'input:
            var titreLabel = $("#inputLabel").val();
            //l'ajoute à la balise <form> de gauche:
            formGauche.append("<span>" + titreLabel + "</span>");
            //efface le formulaire:
            $("#labelElmt").remove();      
        });
    });
 
    $("#droite button:eq(1)").on("click", function() {
 
 
        coteD.append("<div id='idElt'> <p>id de la zone de texte: <input type='text' id='input2'> <button id='boutonOK2'> OK </button> </p> </div>");
 
        $("#boutonOK2").click(function(){
            var textId = $("#input2").val();
            formGauche.append("<input id='newInput' type='text' id=" + textId + " ></input>");
            $("#newInput").css("margin-left", "50px");
            $("#idElt").remove();
        });
 
    });
 
 
 
    $("#droite button:last").click(function(){
 
        coteD.append("<div id='buttonElt'> <p>Texte du bouton: <input type='text' id='input3'> <button id='boutonOK3'> OK </button> </p> </div>");
 
        $("#boutonOK3").click(function(){
            var textButton = $("#input3").val();
            coteG.append("<button id='valider'>" + textButton + "</button>")
            $("#valider").css("margin-top", "50px");
            $("#buttonElt").remove();
        });
 
     });
 
});

Est-ce que vous pourriez me donner un coup de main pour sortir de l'impasse ?
Merci d'avance.

**badaze** · 30/08/2017, 23h46

Voici mon interprétation. Pour que tu puisses passer à la ligne suivante il faut que tu aies un bouton qui te fasse passer à la ligne.

ATTENTION : les scripts js ne sont pas dans les mêmes répertoires que chez toi.

Code html :

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

1
2
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="activite.js"></script>

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button>Label</button>
      <button>Zone de texte</button>
      <button>Bouton</button>
   <button>Nouvelle ligne</button><br><br>   
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="activite2.js"></script>
  </body>
</html>

JQuery

Code :

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
$(function(){
 
    var coteG = $("#gauche");
    var coteD = $("#droite");
 
    //Ajoute un FORM à gauche:
    var formGauche = $("<form></form>").appendTo(coteG);
    formGauche.css("margin-top", "50px");
 
    //AJOUTE UNE SEPRATION A DROITE
    coteD.append("<hr>");
 
    //REACTION AU CLIC SUR LE BOUTON LABEL
    $("#droite button:eq(0)").on("click", function(){
 
 
        coteD.append("<div id='labelElmt'> <p>Texte du label: <input type='text' id='inputLabel' > <button id='boutonOK'> OK </button> </p> </div>");
 
        //REACTION AU CLIC SUR BOUTON VALIDER
        $("#boutonOK").on("click", function(){
            //sauvegarde la valeur de l'input:
            var titreLabel = $("#inputLabel").val();
            //l'ajoute à la balise <form> de gauche:
            formGauche.append("<span>" + titreLabel + "</span>");
            //efface le formulaire:
            $("#labelElmt").remove();      
        });
    });
 
    $("#droite button:eq(1)").on("click", function() {
 
 
        coteD.append("<div id='idElt'> <p>id de la zone de texte: <input type='text' id='input2'> <button id='boutonOK2'> OK </button> </p> </div>");
 
        $("#boutonOK2").click(function(){
            var textId = $("#input2").val();
            formGauche.append("<input type='text' id=" + textId + " ></input>");
            //$("#newInput").css("margin-left", "50px"); <= ici tu mets toujours le même id. Un id doit être unique
            $("#idElt").remove();
        });
 
    });
 
    $("#droite button:eq(2)").click(function(){
 
        coteD.append("<div id='buttonElt'> <p>Texte du bouton: <input type='text' id='input3'> <button id='boutonOK3'> OK </button> </p> </div>");
 
        $("#boutonOK3").click(function(){
            var textButton = $("#input3").val();
            formGauche.append("<button id='valider'>" + textButton + "</button>")
            //$("#valider").css("margin-top", "50px"); <= ici tu mets toujours le même id. Un id doit être unique
            $("#buttonElt").remove();
        });
 
     });
 
    $("#droite button:eq(3)").click(function(){
       formGauche.append("<br/>");
     });  
 
});

Nom : Capture20170830_003.JPG
Affichages : 683
Taille : 24,5 Ko

**Romenag** · 31/08/2017, 14h37

Ah oui super j'avais pas pensé à ça !

Merci beaucoup. Et merci aussi pour les remarques sur les id multiples je n'avais pas réalisé qu'elles se multipliaient quand on faisait plus d'une ligne de formulaire.

J'ai une autre question pendant que j'y suis : Quelle condition je devrais ajouter si je veux "obliger" l'utilisateur à créer son formulaire "dans l'ordre" ?
Pour qu'il ne soit pas possible d'actionner tout les boutons du générateur dans n'importe quel ordre comme dans cet exemple :

Nom : screenshot.png
Affichages : 653
Taille : 17,3 Ko

Nom : screenshot.png
Affichages : 653
Taille : 17,3 Ko

Ou au moins qu'on ne puisse pas déclencher plusieurs fois l'action du bouton, par exemple qu'on ne puisse pas ouvrir une deuxième fois le générateur de label si un premier est déjà ouvert ?
J'ai essayé avec :

Code :

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

1
2
e.stopPropagation();
e.preventDefault();

Mais ça ne marche pas a priori...

Rappel de mon 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button>Label</button>
      <button>Zone de texte</button>
      <button>Bouton</button>
      <button>Nouvelle ligne</button><br><br>
    </div>
 
    <script src="../JQUERY/jQuery.js"></script>
    <script src="../JAVASCRIPT/activite.js"></script>
  </body>
</html>

Code :

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
$(function(){
 
    var coteG = $("#gauche");
    var coteD = $("#droite");
 
    //Ajoute un FORM à gauche:
    var formGauche = $("<form></form>").appendTo(coteG);
    formGauche.css("margin-top", "50px");
    formGauche.css("width", "40%");
    formGauche.css("padding", "30px");
 
    //AJOUTE UNE SEPRATION A DROITE
    coteD.append("<hr>");
 
    //REACTION AU CLIC SUR LE BOUTON LABEL
    $("#droite button:eq(0)").on("click", function(){
 
 
        coteD.append("<div id='labelElmt'> <p>Texte du label: <input type='text' id='inputLabel' > <button id='boutonOK'> OK </button> </p> </div>");
 
        //REACTION AU CLIC SUR BOUTON VALIDER
        $("#boutonOK").on("click", function(){
            //sauvegarde la valeur de l'input:
            var titreLabel = $("#inputLabel").val();
            //l'ajoute à la balise <form> de gauche:
            formGauche.append("<span class='newLabel'>" + titreLabel + "</span>");
            //modifie la marge gauche des nouveaux labels:
            $(".newLabel").css("margin-left", "10px");
            //efface le formulaire:
            $("#labelElmt").remove();      
        });
    });
 
    $("#droite button:eq(1)").on("click", function() {
 
 
        coteD.append("<div id='idElt'> <p>id de la zone de texte: <input type='text' id='input2'> <button id='boutonOK2'> OK </button> </p> </div>");
 
        $("#boutonOK2").click(function(){
            var textId = $("#input2").val();
            formGauche.append("<input class='newInput' type='text' id=" + textId + " ></input>");
            $(".newInput").css("margin-left", "50px");
            $("#idElt").remove();
        });
 
    });
 
    $("#droite button:eq(2)").click(function(){
 
        coteD.append("<div id='buttonElt'> <p>Texte du bouton: <input type='text' id='input3'> <button id='boutonOK3'> OK </button> </p> </div>");
 
        $("#boutonOK3").click(function(){
            var textButton = $("#input3").val();
            coteG.append("<button class='valider'>" + textButton + "</button>")
            $(".valider").css("margin-top", "50px");
            $(".valider").css("margin-left", "400px");
            $("#buttonElt").remove();
            formGauche.css("border-style", "groove");
            formGauche.css("border-width", "4px");
 
        });
 
     });
 
    $("#droite button:eq(3)").click(function(){
        formGauche.append("<br/>");
        formGauche.append("<br/>");
        });   
 
});

Une idée ?

**badaze** · 31/08/2017, 20h36

Tu peux faire en sorte de désactiver le bouton quand on clique dessus puis de le réactiver quand tu valides l'élément que tu veux créer.
Mais pour que cela soit utilisable il faut que tu puisses annuler l'action. Dans ce cas il faut aussi réactiver le bouton en cas d'abandon.

JQuery

Code :

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
$(function(){
 
    var coteG = $("#gauche");
    var coteD = $("#droite");
 
    //Ajoute un FORM à gauche:
    var formGauche = $("<form></form>").appendTo(coteG);
    formGauche.css("margin-top", "50px");
 
    //AJOUTE UNE SEPRATION A DROITE
    coteD.append("<hr>");
 
    //REACTION AU CLIC SUR LE BOUTON LABEL
    $("#droite button:eq(0)").on("click", function(){
        coteD.append("<div id='labelElmt'> <p>Texte du label: <input type='text' id='inputLabel' > <button id='boutonOK'> OK </button>&nbsp;<button id='boutonKO'> Annuler </button> </p> </div>");
  $(this).prop("disabled",true);
 
  //REACTION AU CLIC SUR BOUTON VALIDER
  $("#boutonOK").on("click", function(){
   //sauvegarde la valeur de l'input:
   var titreLabel = $("#inputLabel").val();
   //l'ajoute à la balise <form> de gauche:
   formGauche.append("<span>" + titreLabel + "</span>");
   //efface le formulaire:
   $("#labelElmt").remove();
   $('#droite button:eq(0)').prop("disabled",false);  
  });
  $("#boutonKO").on("click", function(){
   $('#droite button:eq(0)').prop("disabled",false);  
   //efface le formulaire:
   $("#labelElmt").remove(); 
  });   
    });
 
 
    $("#droite button:eq(1)").on("click", function() {
        coteD.append("<div id='idElt'> <p>id de la zone de texte: <input type='text' id='input2'> <button id='boutonOK2'> OK </button>&nbsp;<button id='boutonKO2'> Annuler </button> </p> </div>");
  $(this).prop("disabled",true);
 
  $("#boutonOK2").click(function(){
   var textId = $("#input2").val();
   formGauche.append("<input type='text' id=" + textId + " ></input>");
   //$("#newInput").css("margin-left", "50px"); <= ici tu mets toujours le même id. Un id doit être unique
   $("#idElt").remove();
   $('#droite button:eq(1)').prop("disabled",false);     
  });
  $("#boutonKO2").on("click", function(){
   $('#droite button:eq(1)').prop("disabled",false);  
   //efface le formulaire:
   $("#idElt").remove(); 
  });   
 }); 
 
    $("#droite button:eq(2)").click(function(){ 
        coteD.append("<div id='buttonElt'> <p>Texte du bouton: <input type='text' id='input3'> <button id='boutonOK3'> OK </button>&nbsp;<button id='boutonKO3'> Annuler </button> </p> </div>");
  $(this).prop("disabled",true); 
 
  $("#boutonOK3").click(function(){
   var textButton = $("#input3").val();
   formGauche.append("<button id='valider'>" + textButton + "</button>")
   //$("#valider").css("margin-top", "50px"); <= ici tu mets toujours le même id. Un id doit être unique
   $("#buttonElt").remove();
   $('#droite button:eq(2)').prop("disabled",false);     
  }); 
 
  $("#boutonKO3").on("click", function(){
   $('#droite button:eq(2)').prop("disabled",false);  
   //efface le formulaire:
   $("#buttonElt").remove();     
  });     
 
    });
 
 $("#droite button:eq(3)").click(function(){
  formGauche.append("<br/>");
 });  
 
 
});

[jQuery][Débutante] Générateur de formulaires

JavaScript

Discussions similaires

Partager

Partager