Afficher un formulaire à la place d'un bouton

**d3LTa7** · 26/10/2018, 18h47

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

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

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

**CosmoKnacki** · 26/10/2018, 18h55

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).

**taymia** · 27/10/2018, 09h55

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.

**d3LTa7** · 29/10/2018, 12h25

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

Invité · 29/10/2018, 13h20

Bonjour,

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

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

**d3LTa7** · 29/10/2018, 14h53

JS

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

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
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;
}

Invité · 29/10/2018, 15h12

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

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

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

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

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

**d3LTa7** · 29/10/2018, 15h44

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

Invité · 29/10/2018, 16h26

Je t'ai expliqué comment faire.
Il faut une fonction dédiée à la création du formulaire.

**d3LTa7** · 29/10/2018, 17h28

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" ?

Afficher un formulaire à la place d'un bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager