Discussion :

[kinkon]

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


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

[SpaceFrog]

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]

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]

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]

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]

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

[Toufik83]

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'>");
  }
});
});