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

Version imprimable

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:

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:

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.

1 pièce(s) jointe(s)

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:

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

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
<!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:

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/>");
     });  
 
});

Pièce jointe 307894

1 pièce(s) jointe(s)

Ah oui super j'avais pas pensé à ça ! :D 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 :

Pièce jointe 308062

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:

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

Mais ça ne marche pas a priori...

Rappel de mon code :

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
<!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:

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 ?

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:

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/>");
 });  
 
 
});