Contrôle d'un formulaire avec un nombre de champs variable

**kinkon** · 28/11/2018, 15h31

Bonjour la communauté,

Je sollicite votre aide sur le contrôle d'un formulaire avec un nombre de champ variable.

J'ai un formulaire de saisie des notes des élèves d'une classe et le nombre d'élève varie en fonction de la classe ce qui veut dire que le nombre de champ du formulaire dépend du nombre d'élève de la classe. Par exemple, le nombre d'élève peut être 10 ou 25 ou encore 30.
Donc, si le nombre d'élève est égal à 10 le formulaire affichera 10 champ;
si le nombre d'élève est égal à 15 le formulaire affichera 15 champ;
si le nombre d'élève est égal à 25 le formulaire affichera 25 champ;
Ainsi de suite. Et le formulaire est obtenu par suite du résultat d'un autre traitement.
Passons au code:

Voici le code du formulaire:

Code html :

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

1
2
3
4
5
6
7
<form name="fiche" method="POST" id="register_form" onsubmit="return false;">
<input type="hidden" name="ide<?php echo $j++; ?>" value="<?php echo $idelev; ?>">
<input type="hidden" name="nbre" value="<?php echo $nbre; ?>" id="nbre">
<input type="text" class="form-control" id="note<?php echo $k++; ?>" name="note<?php echo $i++; ?>" placeholder="Note" value="" size=30>
<input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
<span id="error_note<?php echo $l++; ?>" class="error_note"></span>
</form>

Et voici le code JavaScript que j'utilise pour le moment et qui ne fonctionne que pour le premier champ vu que je ne sais pas comment je pourrais utilisée une boucle pour contrôler les champs suivants!

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
$(document).ready(function(){
	var nbreleve=$("#nbre").val();
	//Vérification de la valeur de la note saisie
	$("#note1").keyup(function(){
		if(!$(this).val().match(/^[0-9.]{1,5}$/)){
			$("#note1").css("border-color","#ff0000");
			$("#error_note1").css("color", "red").html("<img src='/appgesco/images/icons/warning.png' alt='Attention' class='erreur'>");
		}
		else{
			$("#note1").css("border-color","green");
			$("#error_note1").css("color", "green").html("<img src='/appgesco/images/icons/ok24.png' alt='Attention'>");
			//check_anant();
		}
	});
});

Voici une capture d'écran pour plus de compréhension
Nom : fichenoteappgesco.jpg
Affichages : 627
Taille : 57,9 Ko

Merci à l'avance pour vos différentes réponses!

**SpaceFrog** · 29/11/2018, 08h21

Dans un premier temps il faut recupérer tous les elements de saisie du form avec un selecteur adapté, puis boucler dessus avec un $.each()

un exemple ici https://api.jquery.com/input-selector/

dan ton cas de figure n'ayant que des inputs (dont un submit )

Code :

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

$(':input').not(':submit').each( ... )

**kinkon** · 29/11/2018, 12h11

Bonjour SpaceFrog,

J'ai besoin d'en savoir plus sur

Dans un premier temps il faut recupérer tous les elements de saisie du form avec un selecteur adapté, puis boucler dessus avec un $.each()

avec plus de code par ce que je ne sais vraiment pas comment m'y prendre!

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
 
$(document).ready(function(){
	var nbreleve=$("#nbre").val();
        var allInputs = $( ":input" );
	//Vérification de la valeur de la note saisie
	$("#note1").keyup(function(){
		if(!$(this).val().match(/^[0-9.]{1,5}$/)){
			$("#note1").css("border-color","#ff0000");
			$("#error_note1").css("color", "red").html("<img src='/appgesco/images/icons/warning.png' alt='Attention' class='erreur'>");
		}
		else{
			$("#note1").css("border-color","green");
			$("#error_note1").css("color", "green").html("<img src='/appgesco/images/icons/ok24.png' alt='Attention'>");
			//check_anant();
		}
	});
});

Merci à l'avance

**kinkon** · 29/11/2018, 12h19

J'ai même tenté ce coup mais rien ne se passe!

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
 
$(document).ready(function(){
	var nbreleve=$("#nbre").val();
	var i=1;
	for(i=1; i<=nbreleve; i++){
		//Vérification de la valeur de la note saisie
		$("#note"+i).keyup(function(){
			if(!$(this).val().match(/^[0-9.]{1,5}$/)){
				$("#note"+i).css("border-color","#ff0000");
				$("#error_note"+i).css("color", "red").html("<img src='/appgesco/images/icons/warning.png' alt='Attention' class='erreur'>");
			}
			else{
				$("#note"+i).css("border-color","green");
				$("#error_note"+i).css("color", "green").html("<img src='/appgesco/images/icons/ok24.png' alt='Attention'>");
			}
		});
	}
});

**paoli121** · 29/11/2018, 12h20

J'ai developpé un script qui va te permettre de traiter tout les formulaires en fonction du type, nombre caractère que tu cherche pour chaque champ.

**kinkon** · 29/11/2018, 12h22

Et tu penses que ton script peut résoudre ce problème?

**Toufik83** · 29/11/2018, 15h06

bonjour,
je n'ai pas bien compris ce code :

Code :

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

1
2
3
4
5
6
7
8
 
<form name="fiche" method="POST" id="register_form" onsubmit="return false;">
  <input type="hidden" name="ide<?php echo $j++; ?>" value="<?php echo $idelev; ?>">
  <input type="hidden" name="nbre" value="<?php echo $nbre; ?>" id="nbre">
  <input type="text" class="form-control" id="note<?php echo $k++; ?>" name="note<?php echo $i++; ?>" placeholder="Note" value="" size=30>
  <input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
  <span id="error_note<?php echo $l++; ?>" class="error_note"></span>
</form>

question 1 : tu ajoute une form pour chaque élève trouvé, ou bien tu met tous les élèves dans une seule form?
question 2 : elle est ou ta boucle dans ton code html ?

suggestion : il ne faut avoir qu'une seule form qui contient tous les inputs d'élèves et un seul bouton d'enregistrement, puis avec jQuery on peut attacher l’événement keyup sur les inputs de la form.

en bref j'imagine le code comme ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<form name="fiche" method="POST" id="register_form" onsubmit="return false;">
     <input type="hidden" name="nbre" value="<?php echo $nbre; ?>" id="nbre">
     <?php for($j=1;$j<=$nbre;$j++){?><!-- //début de for ici !-->
       <input type="hidden" name="ide" value="<?php echo $idelev; ?>">
       <input type="text" class="form-control" id="note<?php echo $j; ?>" name="note" placeholder="Note" value="" size=30>
       <span id="error_note<?php echo $j; ?>" class="error_note"></span><!-- id n'est pas obligatoire ici !-->
     <?php } ?><!-- fin for ici !-->
  <input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
</form>

et le jQuery :

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
 
$(document).ready(function(){
$("#register_form").on('keyup','.form-control',function(){
  if(!$(this).val().match(/^[0-9.]{1,5}$/)){
        $(this).css("border-color","#ff0000")
        .next("span.error_note")
        .css("color", "red").html("<img src='/appgesco/images/icons/warning.png' alt='Attention' class='erreur'>");
  }
  else{
	$(this).css("border-color","green")
        .next("span.error_note")
        .css("color", "green").html("<img src='/appgesco/images/icons/ok24.png' alt='Attention'>");
  }
});
});

**SpaceFrog** · 29/11/2018, 15h33

Un exemple de conversion en json
http://jsfiddle.net/93ncmvju/1/

Suffit ensuite de vérifier les éléments du json
ou de faire la vérification directement au lieu de construire un json...

**kinkon** · 29/11/2018, 15h40

Merci Toufik83 pour ta réponse!

Réponse à la Question 1: Tous les élèves sont dans une seule form
Réponse à la Question 2: Je n'ai pas de boucle dans mon code html

**Toufik83** · 29/11/2018, 16h03

je ne sais pas comment tu affiche les éléments du formulaire, mais si tu veux que le code jQuery que j'ai posté fonctionne, il faut que le span.error_note se trouve directement après le input.form-control, vu qu'on utilise jQuery.next() .

**kinkon** · 29/11/2018, 16h50

Les éléments du formulaire sont obtenus après un traitement php avec la boucle while!

Sinon ton code fonctionne bien Toufik83 ! Maintenant je ne sais pas comment récupérées les notes saisies dans le formulaire pour un traitement php sachant que le nombre de champ du formulaire peut varié d'un affichage a un autre!

**kinkon** · 29/11/2018, 17h13

Envoyé par SpaceFrog

Un exemple de conversion en json
http://jsfiddle.net/93ncmvju/1/

Suffit ensuite de vérifier les éléments du json
ou de faire la vérification directement au lieu de construire un json...

Merci pour ce lien, je l'ai consulté et vu les réponses sous la console et sa ma vraiment donner les maux de tête en voulant adapté le code a mon besoin!

Pardon un peu plus de clémence encore avec le code sinon suis vraiment barré!

**SpaceFrog** · 30/11/2018, 08h54

Quelques éclaircissements sur l'action de ce code ...

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
$('#register_form').on('submit',function(){   //j'attribue l'action a effectuer lors de la validation du formulaire
	allvals={};                                              //intanciation du json 
 
 
  $('input').not(':submit').each( function(){          // le selecteur permet de récupérer tous les inputs du form sauf le submit
                                                                   // et le each boucle sur les inputs de la collection
 
      ById=$(this).attr('id');                               //je recupère l'id de l'input
      ByName=$(this).attr('name');                      //je recupère le name de l'input 
 
      if(ByName!== undefined){                          //si l'input à un name 
      	 if(allvals[ByName]== undefined){              //si le json n'a pas d'indexe "name"
              allvals[ByName]=[$(this).val()];           //je créé l'index "name" dans le json et lui affecte un array avec en [0] la valeur de l'input
          }
         else {                                                  // sinon (l'index du json existe déja ) 
      	      allvals[ByName].push($(this).val());     // je push dans l'array
      		}
      }
      else{                                                    //l'input n'as pas de name
      if(ById!= undefined){                               // l'input à un id
      allvals[$(this).attr('id')]=$(this).val();         // je créé l'index du json = "id" et lui affecte la valeur de 'linput
      }
      }
 
      });
      console.log(allvals);
   })

j'obtiens alors un json avec des array pour les names et des valeurs simples pour les id...

**kinkon** · 30/11/2018, 09h26

Merci SpaceFrog pour cette brève explication!

Voilà j'ai apporté les modifications et suis coincé au niveau de la récupération des notes saisies avec le sélecteur .form-control ou autres

Code:

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
$(document).ready(function(){
	$("#register_form1").on('keyup','.form-control',function(){
			if(!$(this).val().match(/^[0-9.]{1,5}$/)){
				$(this).css("border-color","#ff0000")
				.next("span.error_note")
				.css("color", "red").html("<img src='/appgesco/images/icons/warning.png' alt='Attention' class='erreur'>");
				console.log($(this).index());
			}
			else{
				$(this).css("border-color","green")
				.next("span.error_note")
				.css("color", "green").html("<img src='/appgesco/images/icons/ok24.png' alt='Attention'>");
			}
	});
 
	$("#register_form1").submit(function(){
		$.ajax({
			type: "post",
			url: "/appgesco/scripts/php/verif_form_enr_note_classe.php",
			data: {
				//Je ne sais pas quoi definir ici comme data
			}, 
			beforeSend: function(){
				$("#sauvegarder").attr("disabled",true);
				$("#charge").css("visibility", "visible");
			},
			success: function(data){
				$("#infos").html(data); //.fadeIn(400);
				$("#charge").css("visibility", "hidden");
				$("#sauvegarder").attr("disabled",false);
			}
		});
	});
});

**SpaceFrog** · 30/11/2018, 09h40

à quoi ressemble le code html généré des inputs avec les notes ?

**kinkon** · 30/11/2018, 09h51

Le code HTML ressemble a ça

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<form name="fiche" method="POST" id="register_form1" onsubmit="return false;">
     <input type="hidden" name="nbre" value="<?php echo $nbre; ?>" id="nbre">
     <?php for($j=1;$j<=$nbre;$j++){?><!-- //début de for ici !-->
       <input type="hidden" name="ide" value="<?php echo $idelev; ?>">
       <input type="text" class="form-control" id="note<?php echo $j; ?>" name="note" placeholder="Note" value="" size=30>
       <span id="error_note<?php echo $j; ?>" class="error_note"></span><!-- id n'est pas obligatoire ici !-->
     <?php } ?><!-- fin for ici !-->
  <input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
  <img id="charge" src="/images/animee/chargeur.gif"/>
</form>

**SpaceFrog** · 30/11/2018, 09h55

NON
ça c'est du code php ...

**kinkon** · 30/11/2018, 10h08

Envoyé par SpaceFrog

NON
ça c'est du code php ...

J'ai utilisé du php pour générer mes champs inputs pour la simple raison que le nombre de mes champs inputs varient d'une requête a une autre !

Tantôt c'est 5 champs, tantôt c'est 10, 14, 25, 3

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
<form name="fiche" method="POST" id="register_form1" onsubmit="return false;">
     <input type="hidden" name="nbre" value="<?php echo $nbre=5; ?>" id="nbre">
     <?php for($j=1;$j<=$nbre;$j++){?><!-- //début de for ici !-->
       <input type="hidden" name="ide" value="">
       <input type="text" class="form-control" id="note<?php echo $j; ?>" name="note" placeholder="Note" value="" size=30><br>
       <span id="error_note" class="error_note"></span><!-- id n'est pas obligatoire ici !-->
     <?php } ?><!-- fin for ici !-->
       <input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
       <img id="charge" src="/images/animee/chargeur.gif"/>
</form>

Donc, c'est effectivement sa mon code html

**ProgElecT** · 30/11/2018, 10h26

Salut

Envoyé par kinkon

J'ai utilisé du php pour générer mes champs inputs pour la simple raison que le nombre de mes champs inputs varient d'une requête a une autre !
..........
Donc, c'est effectivement sa mon code html

Non ça c'est le code PHP, il génère un code HTML que tu peux voir en faisant Ctrl U ou menu Code source de la page dans ton navigateur.

**kinkon** · 30/11/2018, 10h48

ET ceci:

Code HTML :

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

1
2
3
4
5
6
7
8
9
<form name="fiche" method="POST" id="register_form1" onsubmit="return false;">
    <input type="hidden" name="nbre" value="" id="nbre"><!-- //début de for ici !-->
   <input type="hidden" name="ide" value="">
   <input type="text" class="form-control" id="note" name="note" placeholder="Note" value="" size=30><br>
   <span id="error_note" class="error_note"></span><!-- id n'est pas obligatoire ici !-->
   <!-- fin for ici !-->
   <input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
   <img id="charge" src="/images/animee/chargeur.gif"/>
</form>

Contrôle d'un formulaire avec un nombre de champs variable

jQuery

Discussions similaires

Partager

Partager