Création d'un formulaire pour créer une liste

**RazOon** · 23/10/2019, 22h50

Bonjour, j'essaie de réaliser mon premier formulaire mais je comprend pas pourquoi cela ne fonctionne pas pourriez vous m'expliquer svp.
partie:

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
<form action="dm.html" method="post"> 
   <div class="début">
    <label for="entrée">Veuillez entrer vos nombres : </label>
    <input class="entrée" type="text" id="entrée" name="nombre"
           placeholder="Vous devez mettre des espaces entre chaque nombres"
           minlength="1" maxlength="100"
           pattern="[1-999999 ]*"
           >
    <span class="validity"></span>
  </div>
  <div>
    <button 
    id="boutonenter"
    type="submit"
    onclick="updatebtn3()"
    >Envoyer</button>
  </div>
  </form>

partie javascript:

Code :

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

1
2
3
4
5
function updatebtn3() {
  var nombre= document.getElementById("entrée").innerHTML
  var nombre = nombre.split(' ')
  window.location.reload(false);
}

J'aimerais que les valeurs que je vais rentrer dans la partie input rentre dans ma liste nombre je précise que le nom du fichier utiliser est dm.html et celui ou je met mes fonction est appelé fonction.js et il est bien déclaré au début du programme.Ne jugez pas mes grosses erreurs car il doit y en avoir. Merci de votre compréhension.

**donimedia** · 30/10/2019, 14h00

Bonjour ,

Là , de but en blanc , je dirais qu'il y a deux erreurs dans votre code .
Elles sont minimes mais suffisantes pour bloquer le code Javascript :

Au niveau de la fonction updatebtn3() ,

vous avez oublié de rajouter des point-virgules , à la fin de ces instructions :

Code :

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

1
2
var nombre= document.getElementById("entrée").innerHTML
	var nombre = nombre.split(' ')

dans ces mêmes instructions , vous déclarez deux fois la variable nombre

Mais de façon générale , pour clarifier les choses ,

Si votre but est de transmettre la donnée saisie au fichier dh.html , pour ensuite la transformer en une liste de nombres :

Dans ce cas , 2 cas de figure :

1°) Vous récupérez la donnée saisie "côté serveur" , à l'aide d'un langage comme PHP .

il vous faudra alors :

renommer votre fichier dh.html en dh.php
récupérer la donnée transmise en utilisant la variable $_POST
transformer cette donnée en une liste de nombres

Votre fichier de saisie sera alors de la forme :

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
<!DOCTYPE html>
 
<html>
 
<head>
<title>D&eacute;mo d'utilisation d'un formulaire</title>
 
</head>
 
<body>
 
<form action="answer-to-issue\dm.php" method="post"> 
	<div class="debut">
    		<label for="entree">Veuillez entrer vos nombres : </label>
    		<input class="entree" type="text" id="entree" name="nombre" 
				placeholder="Vous devez mettre des espaces entre chaque nombres"
           			minlength="1" maxlength="100"
           			pattern="[1-999999 ]*">
 
    		<span class="validity"></span>
	</div>
	<div>
    		<button id="boutonenter" type="submit" onclick="updatebtn3()">Envoyer</button>
  	</div>
</form>
 
</body>
 
</html>

2°) Vous récupérez la donnée saisie côté client ( navigateur ) , à l'aide d'un langage comme Javascript .

Sans rentrer dans les détails , une méthode consiste à utiliser des expressions régulières ( Regex ) ,
pour extraire la donnée transmise de l'URL de destination .

Si votre but est de récupérer la donnée saisie pour la transformer en une liste de nombres , tout en restant sur la page de saisie :

Dans ce cas , l'utilisation d'un formulaire est inutile , seul l'élément de saisie <input type="text"> est important .
Pour récuperer la donnée saisie , il vous suffit alors d'utiliser l'instruction :

Code :

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

document.getElementById("entree").value;

au lieu de :

Code :

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

document.getElementById("entree").innerHTML;

A noter que l'instruction suivante :

Code :

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

window.location.reload(false);

est inutile car elle force la page courante à se recharger à partir d'un cache , effaçant ainsi toutes les données de la page .
( Vous pouvez le vérifier en décommentant l'instruction , dans le code que je vous fournis sur la plate-forme de test
, voir "Tests" ci-dessous )

Votre fichier HTML de saisie , débarrassé des éléments inutiles , a donc la forme suivante :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
 
<html>
 
<head>
	<title>D&eacute;mo d'utilisation d'un formulaire</title>
	<script type="text/javascript">
 
                maListeNombresHTML = "";  // Variable globale , donc accessible dans tout le code
      
                function formatageListe(value) {
                        maListeNombresHTML += value + "<br />";
                };
 
 
                function updatebtn3() {
                        maListeNombresHTML = "";  //  Réinitialisation de la variable globale , à chaque mise à jour
                        var nombreTableau = [];
                        var nombre= document.getElementById("entree").value;
                        //  window.alert("Donnée saisie = " + nombre);
                        nombreTableau = nombre.split(" ");
                        //  window.alert("Nombre ( tableau ) = " + nombreTableau);
                        //  window.location.reload(false);
 
                        //  boucle qui formate chaque élément du tableau nombre , en vue d'un afiichage HTML
                        nombreTableau.forEach(formatageListe);
                        
                        //  Insertion de la liste des nombres formatés , 
                        //  entre les balises <p></p> , ayant pour id : ma_liste
                        //  Je peux utiliser la variable maListeNombresHTML en dehors de la fonction formatageListe()
                        //  car c'est une variable globale .
                        document.getElementById("ma_liste").innerHTML =  maListeNombresHTML;
                };
 
        </script>
</head>
 
<body>
 
 
		<div class="debut">
    			<label for="entree">Veuillez entrer vos nombres : </label>
    			<input class="entree" type="text" id="entree" name="nombre" 
				placeholder="Vous devez mettre des espaces entre chaque nombres"
           			minlength="1" maxlength="100"
           			pattern="[1-999999 ]*">
 
    			<span class="validity"></span>
		</div>
		<div>
    			<button id="boutonenter"  onclick="updatebtn3()">Transformer en liste de nombres</button>
	  	</div>
 
		<p id="ma_liste"></p>
 
	</body>
</html>

Invité · 30/10/2019, 18h38

Bonjour,

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="dm.html" method="post"> 
  <div>
    <label for="nombres">Veuillez entrer vos nombres : </label>
    <input id="nombres" type="text" name="nombres"
           placeholder="Nombres entiers, séparés par des espaces"
           minlength="1" maxlength="100" pattern="[0-9 ]*" />
    <p id="nombres_error"></p>
  </div>
  <div>
    <button id="boutonenter" type="submit" />Envoyer</button>
  </div>
<p id="nombres_validity"></p>
</form>

Code JS :

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
"use strict";
const elt_boutonenter = document.getElementById("boutonenter");
const elt_nombres = document.getElementById("nombres");
const elt_nombres_error = document.getElementById("nombres_error");
const elt_nombres_validity = document.getElementById("nombres_validity");
 
elt_boutonenter.addEventListener("click", function(event){
 
  event.preventDefault(); // empêche l action par défaut : envoyer le formulaire)
  elt_nombres_error.textContent = "";
 
  var nombres = elt_nombres.value.trim();
  var regex = RegExp('^[0-9 ]*$');
  if( !regex.test(nombres) )
  {
    elt_nombres_error.textContent = "Erreur, les données ne sont pas correctes (Nombres entiers, séparés par des espaces)";
    elt_nombres.value = "";
  } 
  else 
  {
    var nombres_list = nombres.split(' ');
    elt_nombres_validity.textContent = "Vous avez choisi : "+nombres_list.join(', ');
  }
});

Création d'un formulaire pour créer une liste

JavaScript

Discussions similaires

Partager

Partager