Créer un formulaire sur une page html vide

**CCACC02** · 11/04/2019, 17h38

Bonjour,
Je souhaite réaliser la création d'un formulaire en Js au chargement de la page.

mon fichier index.html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
 
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 
</body>
</html>

Mon fichier javascript :

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
(function(){
	var formCreate = {
		init: function(){
			window.addEventListener('load', function(event){
 
				var tab = ['A', 'B', 'C', 'D', 'E'];
 
				var form = document.createElement('form');
				document.body.appendChild(form);
				var select = document.createElement('select');
				form.appendChild(select);
				var option = document.createElement('option');
				do{
					option.innerHtml = tab[i];
					select.appendChild(option).value=tab[i];
					i++;
				}while(i<5);
 
			})
		}
	}
	formCreate.init();
})();

Je souhaite créer un formulaire avec une liste déroulante dont les items vont se trouver dans un tableau. Au chargement de la page j'ai bien mes balises <form></form> et <select></select> qui apparaissent mais ça coince pour les options.
Quelqu'un aurait-il une idée de mon erreur?

Merci

**Beginner.** · 11/04/2019, 18h09

Salut,

Il y a plusieurs problèmes :

1- La variable i n'est pas définie, tu peux ajouter var i = 0 ; avant la boucle.

2- Ce n'est pas option.innerHtml mais option.innerHTML.

3- Il y a des méthodes dédiées pour ajouter des options, ce serait peut-être plus simple de les utiliser mais si tu préfères les méthodes du DOM classiques alors il faut que tu saches que ton code "crée" qu'une seule option. Le fait d’exécuter plusieurs fois select.appendChild(option) ne signifie pas que plusieurs options seront ajoutées, c'est toujours la même option que tu ajoutes.

Ici on ne le voit pas bien car l'option est toujours ajoutée au même endroit mais si l'endroit changeait tu ne ferais que déplacer la même et unique option.

---> En fait il faut à chaque fois (à chaque tour de boucle) "créer" une option avec l'instruction que tu as utilisée : document.createElement('option').

Voilà corrige déjà ça...

Pour le troisième point, voici un exemple du même problème : #3

Et pour les méthodes dédiées pour ajouter des options il y a ça par exemple : https://developer.mozilla.org/en-US/...ectElement/add

C'est plus simple et meilleur que d'utiliser "innerHTML"...

**CCACC02** · 11/04/2019, 19h16

Oui evidemment, avec une coquille sur innerHTML ca pouvait pas fonctionner. Et je n'avais pas compris que pour l'option, il fallait recreer l'élément à chaque fois.
Un grand merci pour ton aide... ça fonctionne. Et avec juste un petit conseil pour le reste je me suis débrouillé

**CCACC02** · 11/04/2019, 19h39

J'essaye de poser les fondations de mon formulaire mais je rencontre des difficultés à nouveau... Tout s'enchaine correctement jusqu'à l'ajout du paragraphe et de la balise select ... j'ai du mal comprendre un truc à propos de la fonction appendChild

Voici mon code modifié par rapport à ma première question :

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
(function(){
	var formCreate = {
		init: function(){
			window.addEventListener('load', function(event){
 
				var tab = ['A', 'B', 'C', 'D', 'E'];
 
				var form = document.createElement('form');
				document.body.appendChild(form);
				var field = document.createElement('fieldset');
				form.appendChild(field);
				var legend = document.createElement('legend');
				field.appendChild(legend);
				legend.innerHTML='Correspondance pour :';
				var paragraph = document.createElement('p');
				field.appendChild('paragraph');
				paragraph.innerHTML='Choisissez un point de depart :';
				var select = document.createElement('select');
				form.field.appendChild(select);
 
				var i=0;
 
				do{
					var option = document.createElement('option');
					option.innerHTML = tab[i];
					select.appendChild(option).value=tab[i];
					i++;
				}while(i<5);
 
			})
		}
	}
	formCreate.init();
})();

Merci de votre conseil avisé.

**Beginner.** · 11/04/2019, 21h14

Utilise la console, ça pourrait t'aider...

Il y a deux problèmes :

1- Ce n'est pas field.appendChild('paragraph'); mais plutôt field.appendChild(paragraph);...
2- remplace form.field.appendChild(select); par field.appendChild(select);

**Beginner.** · 11/04/2019, 21h20

Envoyé par Beginner.

Et pour les méthodes dédiées pour ajouter des options il y a ça par exemple : https://developer.mozilla.org/en-US/...ectElement/add

Si on utilise ces méthodes dans ton cas tu pourrais remplacer ça :

Code javascript :

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

1
2
3
4
5
6
do {
    var option = document.createElement('option');
    option.innerHTML = tab[i];
    select.appendChild(option).value = tab[i];
    i++;
} while (i < 5);

par ça :

Code javascript :

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

1
2
3
4
5
6
7
do {
    var option = document.createElement('option');
    option.text = tab[i];
    option.value = tab[i];
    select.add(option, null)
    i++;
} while (i < 5);

**CCACC02** · 12/04/2019, 11h33

Merci, j'avais effectivement zappé les '' dans la ().

Code modifié :

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
(function(){
	var formCreate = {
		init: function(){
			window.addEventListener('load', function(event){
 
				var notesFr = ['Do', 'Ré', 'Mi', 'Fa', 'Sol', 'La', 'Si'];
				var notesUs = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C'];
 
				var form = document.createElement('form');
				document.body.appendChild(form);
				var field = document.createElement('fieldset');
				form.appendChild(field);
				var legend = document.createElement('legend');
				field.appendChild(legend);
				legend.innerHTML='Correspondance d\'une note Fr en note US :';
				var paragraph = document.createElement('p');
				field.appendChild(paragraph);
				paragraph.innerHTML='Choisissez une note dans la liste :';
				var select = document.createElement('select');
				field.appendChild(select);
				var option = document.createElement('option');
				option.innerHTML = '';
				select.appendChild(option);
				select.setAttribute('id','choix');
 
				var i=0;
				do{
					var option = document.createElement('option');
					var note = notesFr[i];
					option.innerHTML = ''+note+'';
					select.appendChild(option).value=''+note+'';
					i++;
				}while(i<7);
 
				var choix;
				var element = document.getElementsByTagName('select');
				select.addEventListener('change', function(event){
					choix = form.select['choix'].value;
				})
 
 
 
			})
		}
	}
	formCreate.init();
})();

J'essaye maintenant de tenter d'écouter un évènement pour tenter de récupérer la valeur du select mais le debugger me dit que la fonction n'est pas définie

Il faut encore redéfinir le champs?

Merci de votre aide

**CCACC02** · 12/04/2019, 15h27

Je suis parvenu à retrouver mon erreur :

il fallait coder :

Code :

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

choix = form['choix'].value;

et pas

Code :

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

choix = form.select['choix'].value;

.

**CCACC02** · 12/04/2019, 16h30

J'ai un soucis de suppression de div. L'utilisateur peut modifier son choix au sélecteur et l'affichage du résultat se fait dans une div. Cependant une div vient s'ajouter à la première si l'utilisateur modifie son choix. J'essaye de supprimer la div existante avant de la remplacer mais cela ne fonctionne pas. Faut-il ajouter quelque chose?

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
(function(){
	var formCreate = {
		init: function(){
			window.addEventListener('load', function(event){
 
				var tab = ['A', 'B', 'C', 'D', 'E'];
 
				var form = document.createElement('form');
				document.body.appendChild(form);
				var field = document.createElement('fieldset');
				form.appendChild(field);
				var legend = document.createElement('legend');
				field.appendChild(legend);
				legend.innerHTML='Correspondance pour :';
				var paragraph = document.createElement('p');
				field.appendChild('paragraph');
				paragraph.innerHTML='Choisissez un point de depart :';
				var select = document.createElement('select');
				field.appendChild(select);
				var option = document.createElement('option');
				option.innerHTML = '';
				select.appendChild(option);
				select.setAttribute('id','choix');
 
				var i=0;
 
				do{
					var option = document.createElement('option');
					option.innerHTML = tab[i];
					select.appendChild(option).value=tab[i];
					i++;
				}while(i<5);
 
				var choix;
				var element = document.getElementsByTagName('select');
				select.addEventListener('change', function(event){
					choix = form['choix'].value;
 
					choix = choix - 1;
 
					resultat = tab[choix];
 
					if (choix >= 0){
 
						var div = document.createElement('div');
						document.body.appendChild(div);
						div.setAttribute('id', 'result');
                                                if(div.getElementsById('result')!=null){
							div.getElementsById('result').remove();
						}
						var p = document.createElement('p');
						 p.innerHTML = 'Vous avez séléctionné : ' + resultat;
						p.setAttribute('class', 'shaping');
						div.appendChild(p);
 
				}
			});
	}
	formCreate.init();
})();

**Beginner.** · 12/04/2019, 16h40

Je ne suis pas sûr de comprendre ce que tu veux faire, pourquoi tu utilises l'attribut (id) "choix" ? Est-ce pour récupérer l'option sectionnée ? Si oui eh bien il y a des choses toutes faites pour ça...

**CCACC02** · 12/04/2019, 16h42

Envoyé par Beginner.

Je ne suis pas sûr de comprendre ce que tu veux faire, pourquoi tu utilises l'attribut (id) "choix" ? Est-ce pour récupérer l'option sectionnée ? Si oui eh bien il y a des choses toutes faites pour ça...

Oui, c'est pour récupérer le choix de l'utilisateur. Mes connaissances sont encore limitées et j'essaye de faire au mieux avec ce que je sais déjà

Et en fait, la valeur sélectionnée fera appel à un résultat que je n'ai pas mentionné ici mais qui est contenu dans un autre tableau.

**Beginner.** · 12/04/2019, 16h53

Et ça marche ?

Même si cela fonctionne il y a plus simple quand même...

**CCACC02** · 12/04/2019, 16h56

Envoyé par Beginner.

Et ça marche ?

Même si cela fonctionne il y a plus simple quand même...

Oui cela fonctionne mais chaque fois que l utilisateur modifie sa réponse, une nouvelle div se crée.
Après peut-être il y a plus simple mais à mon niveau, ce que j’ai compris pour le moment se résume à ce que j’ai fait même si il y a plus simple

**Beginner.** · 12/04/2019, 17h10

Ben procède par étapes...

- Pourquoi utiliser cette structure pour les fonctions, d'ailleurs ton code ne fonctionne pas, il manque des accolades...
Tu as dû mal copier/coller du coup je n'ai pas pu tester pour l'instant...

- Fais un petit code pour apprendre à récupérer l'option sectionnée...

- Pour ton problème de div : au lieu d'en "créer" une à chaque fois, tu pourrais en créer qu'une et alors tu n'aurais qu'à changer son contenu en fonction du choix

**Beginner.** · 12/04/2019, 18h41

J'ai pu tester ton code...
Et je découvre qu'effectivement form['choix'].value revoie bien la "value" de l'option sélectionnée ???
Je ne sauvais pas ça et je ne sais pas si c'est fiable dans tous les cas, c'est à vérifier...

Par contre "value" est une string et non un nombre donc cela n'a pas de sens de faire : choix = choix - 1; puis if (choix >= 0)...

Sinon voici un exemple de solution partant de ton code avec quelques modifications et simplifications :

Code javascript :

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
(function () {
  var formCreate = {
    init: function () {
      window.addEventListener('load', function (event) {
 
        var tab = ['', 'A', 'B', 'C', 'D', 'E'];
 
        var form = document.createElement('form');
 
        var field = document.createElement('fieldset');
        form.appendChild(field);
 
        var legend = document.createElement('legend');
        legend.textContent = 'Correspondance pour :';
        field.appendChild(legend);
 
        var paragraph = document.createElement('p');
        paragraph.textContent = 'Choisissez un point de depart :';
        field.appendChild(paragraph);
 
        var select = document.createElement('select');
        select.setAttribute('id', 'choix');
        field.appendChild(select);
 
        for (var i = 0, taille = tab.length; i < taille; i++) {
          var option = document.createElement('option');
          option.text = tab[i];
          option.value = tab[i];
          select.add(option, null)
        }
        document.body.appendChild(form);
 
        var div = document.createElement('div');
        div.setAttribute('id', 'result');
        var p = document.createElement('p');
        p.setAttribute('class', 'shaping');
        div.appendChild(p);
        document.body.appendChild(div);
 
        select.addEventListener('change', function (event) {          
          // var p = document.querySelector("#result > p");
          var p =  document.getElementsByClassName("shaping")[0]; 
          var choix = form['choix'].value;
 
          if (choix !== "") {
            p.textContent = 'Vous avez séléctionné : ' + choix;
          } else {
            p.textContent = "";
          }
        });
      })
    }
  }
  formCreate.init();
})();

Tu peux le tester directement ici : https://jsbin.com/zoweqiwowa/edit?js,output

Créer un formulaire sur une page html vide

JavaScript

Discussions similaires

Partager

Partager