Afficher un formulaire à la place d'un bouton

Version imprimable

26/10/2018, 18h47
d3LTa7

Afficher un formulaire à la place d'un bouton
Coucou !!

j'ai fait un formulaire qui apparaît à l'aide d'un bouton, une fois appuyé, le bouton disparaît avec bouton.style.visibility = "hidden"; et donc le formulaire apparaît à l'aide de divers .createElement qui vont se placer dans la balise <form> du HTML.

Coté HTML on a :
Code:

1 2 <button id="bouton">formulaire</button> <form></form>
Le souci c'est que le formulaire va apparaître en dessous du bouton même si celui ci n'est plus visible. Mais moi j'aimerais que le formulaire prenne la place du bouton.

Merci
26/10/2018, 18h55
CosmoKnacki

Dans ce cas au lieu de jouer sur la visibilité, joue sur l'affichage, c'est à dire la propriété css display (en la mettant à none).

D'ailleurs rien ne t'empêche de jouer avec cette même propriété pour masquer puis faire apparaître ton formulaire (au lieu de te fatiguer à le créer pièce par pièce avec des createElement).
27/10/2018, 09h55
taymia

Bonjour d3LTa7i,

visibility:hidden ne supprime pas ton bouton, il le cache tout simplement.C'est pourquoi ton formulaire reste sous la place du bouton qui est invisible.

La solution: Remplace visibility:hidden par display:none.

Explication: Contrairement à visibility:hidden, display:none va supprimer l'affichage de ton bouton. Du coup il ne restera que le formulaire qui ne pourra plus se mettre sous un bouton qui n'existe pas.

Cordialement.
29/10/2018, 12h25
d3LTa7

Super !! Merci de vos réponses !! Ça marche super !!

Et pour continuer dans la lancée, j'aimerais que, quand on valide le formulaire via un autre bouton (élément de type "submit" qui apparaît en même temps que les champs du formulaire) le bouton formulaire revienne et que la partie "form" disparaisse.

J'ai essayé en mettant dans ma fonction form.addEventListener("submit", function{ bouton.style.display="initial"; form.style.display = "none";});

Une fois validé tout ce passe bien le formulaire disparaît et le bouton revient sauf que si je veux recommencer l'opération le formulaire ne revient plus --'

J'imagine que c'est un problème évident selon vous... Désolé je débute encore ;)
29/10/2018, 13h20
Invité

Bonjour,

ce qui est évident, c'est que tu ne montres pas ton code *.

* Je parle toujours du code nécessaire et suffisant.

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    },
];
 
 
 
var site = document.createElement('dl');
 
 
listeLiens.forEach(function(link){
    var parcel = document.createElement('dt');
    var title = document.createElement('a');
    var ajout = document.createElement('dt');
    var spanTitle = document.createElement('span');
    var spanAjout = document.createElement('span');
    title.textContent = link.titre + ' ';
    title.href = link.url;
    spanTitle.textContent = link.url;
    spanAjout.textContent = 'Ajouté par ' + link.auteur;
    title.style.color = '#428bca';
    title.style.fontWeight = 'bold';
    title.style.textDecoration = 'none';
    ajout.appendChild(spanAjout);
    parcel.appendChild(title);
    parcel.appendChild(spanTitle);
    parcel.appendChild(ajout);
    site.appendChild(parcel);
    parcel.classList.add('lien');
});
 
document.getElementById('contenu').appendChild(site);
 
 
var bouton = document.getElementById("bouton");
bouton.addEventListener("click", clic);
 
var form = document.querySelector("form")
 
 
function clic(){
 
    var auteurF = document.createElement('input');
    var titreF = document.createElement('input');
    var urlF = document.createElement('input');
    var ajouter = document.createElement('input');
    //form.style.display = "initial";
    auteurF.name = "auteurN"
    auteurF.id = "auteur";
    auteurF.placeholder = "Entrez votre nom";
    auteurF.type = "text";
    auteurF.required = true;
    auteurF.size = '20';
    titreF.name = "titreN"
    titreF.id = "titre";
    titreF.placeholder = "Entrez le titre du lien";
    titreF.type = "text";
    titreF.required = true;
    titreF.size = '50';
    urlF.name = "urlN"
    urlF.id = "url";
    urlF.placeholder = "Entrez l'URL du lien";
    urlF.type = "text";
    urlF.required = true;
    urlF.size = '50';
    ajouter.value = "Ajouter"
    ajouter.type = "submit";
    ajouter.id = "ajouter";
    form.addEventListener("submit", function(e){
        var parcelS = document.createElement('dt');
        var titleS = document.createElement('a');
        var ajoutS = document.createElement('dt');
        var spanTitleS = document.createElement('span');
        var spanAjoutS = document.createElement('span');
        var auteurS = form.elements.auteurN.value;
        var titreS = form.elements.titreN.value;
        var urlS = form.elements.urlN.value;
        var valide = document.getElementById('valide');
        titleS.textContent = titreS + ' ';
        titleS.href = "http://" + urlS;
        spanTitleS.textContent = "http://" + urlS;
        spanAjoutS.textContent = 'Ajouté par ' + auteurS;
        titleS.style.color = '#428bca';
        titleS.style.fontWeight = 'bold';
        titleS.style.textDecoration = 'none';
        site.insertBefore(parcelS, document.querySelector('dt'));
        ajoutS.appendChild(spanAjoutS);
        parcelS.appendChild(titleS);
        parcelS.appendChild(spanTitleS);
        parcelS.appendChild(ajoutS);
        parcelS.classList.add('lien');
 
        bouton.style.display = "initial";
        form.style.display = "none";
 
        valide.textContent = 'Le lien '+'"'+titreS+'"'+' a bien été ajouté.';
        valide.style.color = '#428bca';
        valide.style.backgroundColor = '#D8EAE8';
        valide.style.fontWeight = '550';
        setTimeout(function(){
            valide.style.display = "none";
        }, 2000);
        e.preventDefault();
    });
    form.appendChild(auteurF);
    form.appendChild(titreF);
    form.appendChild(urlF);
    form.appendChild(ajouter);
    bouton.style.display = "none";
}

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
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 2</title>
</head>
 
<body>
    <h1>Activité 2</h1>
 
    <div id="valide"></div>
 
    <button id="bouton">Ajouter un lien</button>
    <form></form>
 
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>
 
    <script src="../js/liensweb.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
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}
 
span {
    font-weight: normal;
    font-size: 80%;
}
 
.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}
 
form {
    display: flex;
    flex-direction: row;
    margin: 0px;
    padding: 0px;
}
 
input {
    margin-right: 10px;
    display: flex;
}
 
#valide {
    padding: 15px;
    margin-bottom: 10px;
}

Citation:

Envoyé par CosmoKnacki

...rien ne t'empêche de jouer avec cette même propriété pour masquer puis faire apparaître ton formulaire (au lieu de te fatiguer à le créer pièce par pièce avec des createElement).

Pourquoi créer le formulaire en JavaScript, alors qu'il peut être créé en HTML, et simplement masqué / affiché par un display:none/block ?

Car là, au clic sur le bouton, tu CREES le formulaire via JS.

La 2ème fois, tu va RECREES (inutilement !) les éléments du formulaire, qui vont se retrouver en double.
Ce n'est ni logique, ni ergonomique, ni...rien.

Alors qu'il suffit d'écrire en HTML * (sous le code du bouton) :
Code:

1 2 3 4 5 6 7 <div id="mon_form"> <form> <input name="auteurN" id="auteur" placeholder="Entrez votre nom" type="text" required="" size="20"> <input name="titreN" id="titre" placeholder="Entrez le titre du lien" type="text" required="" size="50"> <input name="urlN" id="url" placeholder="Entrez l'URL du lien" type="text" required="" size="50"><input type="submit" value="Ajouter" id="ajouter"> </form> </div>
Remarque : pour ne pas être "embêté avec le display:flex; du <form>, applique le display: block/none sur le <div id="mon_form"> (que tu mets en display:none; dans le CSS).

* Ou, si tu veux vraiment le faire vie JS : il faut le créer une fois pour toutes, en créant une fonction que tu mets au chargement de page :
Code:

1 2 3 4 // au chargement de page window.addEventListener('load', function(){ creat_form(); });

29/10/2018, 15h44
d3LTa7

Effectivement, on peut faire le tout via HTML directement, sauf que c'est un exercice qu'on me demande de faire avec une base déjà existante et des consignes à respecter.

J'imagine aussi qu'il y à différente façon plus simple et plus ergonomique de faire ce genre de chose, mais pour le moment je veux juste faire des choses petit a petit pour mieux comprendre en fonction de ce que j'ai déjà fait et en fonction des cours que je suis.... C'est pour cela que je demandais juste a savoir comment faire pour que le form prenne la place du bouton et que l'autre bouton ferme le form et remette le bouton du début !!
29/10/2018, 16h26
Invité

Je t'ai expliqué comment faire.
Il faut une fonction dédiée à la création du formulaire.
29/10/2018, 17h28
d3LTa7

Ha... Si je comprend bien, la fonction lié au click du bouton doit creer directement les balises <form> ?

Et donc cette même fonction va appeler une autre fonction qui va creer toute la partie "form" ?

Citation:

Envoyé par d3LTa7

Ha... la fonction lié au click du bouton doit creer directement les balises <form> ?

C'est DEJA ce que tu fais.
Et ce n'est pas bon.

Citation:

Envoyé par d3LTa7

Et donc cette même fonction va appeler une autre fonction qui va creer toute la partie "form" ?

NON PLUS.

Le formulaire doit être créé UNE SEULE fois, au chargement de la page.

Tu devrais mettre des EXPLICATIONS dans ton code JS.
Peut-être que tu comprendrais mieux ce que tu fais.

Remarque : il n'y a pas grand chose à changer dans ton code : juste la LOGIQUE.

Et comme je l'ai conseillé, remplace dans le code HTML :

Code:

<form></form>

par

Code:

<div id="mon_form"></div>

Et crée le formulaire dedans.

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
var bouton = document.getElementById("bouton");
bouton.addEventListener("click", clic);
 
var mon_form = document.querySelector("#mon_form");
 
function clic(){
  bouton.style.display = "none";
  mon_form.style.display = "block";
}
 
function create_mon_form()
{
  // ----------
  // 1- CREATION du formulaire
  var mon_form = document.querySelector("#mon_form");
  var form = document.createElement('form');
  mon_form.appendChild(form);
    //...  
    //...  
  // ----------
  // 2- TRAITEMENT du formulaire
  form.addEventListener("submit", function(e){
    //...  
    bouton.style.display = "block";
    mon_form.style.display = "none";
    //...  
  });
  // ----------
}
// au chargement de page
window.addEventListener('load', function(){
  create_mon_form();
});

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var listeLiens = [
  {
    titre: "So Foot",
    url: "http://sofoot.com",
    auteur: "yann.usaille"
  },
  {
    titre: "Guide d'autodéfense numérique",
    url: "http://guide.boum.org",
    auteur: "paulochon"
  },
  {
    titre: "L'encyclopédie en ligne Wikipedia",
    url: "http://Wikipedia.org",
    auteur: "annie.zette"
  },
];
 
var site = document.createElement('dl');
 
listeLiens.forEach(function(link){
  var parcel = document.createElement('dt');
  var title = document.createElement('a');
  var ajout = document.createElement('dt');
  var spanTitle = document.createElement('span');
  var spanAjout = document.createElement('span');
  title.textContent = link.titre + ' ';
  title.href = link.url;
  spanTitle.textContent = link.url;
  spanAjout.textContent = 'Ajouté par ' + link.auteur;
  title.style.color = '#428bca';
  title.style.fontWeight = 'bold';
  title.style.textDecoration = 'none';
  ajout.appendChild(spanAjout);
  parcel.appendChild(title);
  parcel.appendChild(spanTitle);
  parcel.appendChild(ajout);
  site.appendChild(parcel);
  parcel.classList.add('lien');
});
 
document.getElementById('contenu').appendChild(site);
 
var bouton = document.getElementById("bouton");
bouton.addEventListener("click", clic);
 
var mon_form = document.querySelector("#mon_form");
 
function clic(){
  bouton.style.display = "none";
  mon_form.style.display = "block";
}
 
function create_mon_form()
{
  // ----------
  // 1- CREATION du formulaire
  var mon_form = document.querySelector("#mon_form");
  var form = document.createElement('form');
  // ----------
  var auteurF = document.createElement('input');
  var titreF = document.createElement('input');
  var urlF = document.createElement('input');
  var ajouter = document.createElement('input');
  // ----------
  auteurF.name = "auteurN"
  auteurF.id = "auteur";
  auteurF.placeholder = "Entrez votre nom";
  auteurF.type = "text";
  auteurF.required = true;
  auteurF.size = '20';
  titreF.name = "titreN"
  titreF.id = "titre";
  titreF.placeholder = "Entrez le titre du lien";
  titreF.type = "text";
  titreF.required = true;
  titreF.size = '50';
  urlF.name = "urlN"
  urlF.id = "url";
  urlF.placeholder = "Entrez l'URL du lien";
  urlF.type = "text";
  urlF.required = true;
  urlF.size = '50';
  ajouter.value = "Ajouter"
  ajouter.type = "submit";
  ajouter.id = "ajouter";
  // ----------
  form.appendChild(auteurF);
  form.appendChild(titreF);
  form.appendChild(urlF);
  form.appendChild(ajouter);
  // ----------
  mon_form.appendChild(form);
  // ----------
  // 2- TRAITEMENT du formulaire
  form.addEventListener("submit", function(e)
  {
    e.preventDefault();
    var parcelS = document.createElement('dt');
    var titleS = document.createElement('a');
    var ajoutS = document.createElement('dt');
    var spanTitleS = document.createElement('span');
    var spanAjoutS = document.createElement('span');
    var auteurS = form.elements.auteurN.value;
    var titreS = form.elements.titreN.value;
    var urlS = form.elements.urlN.value;
    var valide = document.getElementById('valide');
    titleS.textContent = titreS + ' ';
    titleS.href = "http://" + urlS;
    spanTitleS.textContent = "http://" + urlS;
    spanAjoutS.textContent = 'Ajouté par ' + auteurS;
    titleS.style.color = '#428bca';
    titleS.style.fontWeight = 'bold';
    titleS.style.textDecoration = 'none';
    site.insertBefore(parcelS, document.querySelector('dt'));
    ajoutS.appendChild(spanAjoutS);
    parcelS.appendChild(titleS);
    parcelS.appendChild(spanTitleS);
    parcelS.appendChild(ajoutS);
    parcelS.classList.add('lien');
 
    bouton.style.display = "block";
    mon_form.style.display = "none";
 
    valide.textContent = 'Le lien '+'"'+titreS+'"'+' a bien été ajouté.';
    valide.style.color = '#428bca';
    valide.style.backgroundColor = '#D8EAE8';
    valide.style.fontWeight = '550';
    // on vide les input
    var inputs = form.querySelectorAll('#mon_form input');
    inputs.forEach(function(elt){
      elt.value = '';
    });
    setTimeout(function(){
      valide.style.display = "none";
    }, 2000);
  });
}
// au chargement de page
window.addEventListener('load', function(){
  create_mon_form();
});