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

Version imprimable

Voir 40 message(s) de cette discussion en une page

30/11/2018, 10h53
ProgElecT

Re

A que là c'est :ccool: c'est bien le code HTLM généré

Mais mon problème n'est toujours pas résolu!

Code:

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>

Toujours coincé au niveau de la récupération des notes saisies avec le sélecteur .form-control ou autres

Code:

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
$(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'>");
			}
	}); //jusqu'ici c'est bon!
 
// Ce qui suit ne fonctionne pas!
	$("#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);
			}
		});
	});
});

30/11/2018, 11h20
ProgElecT

Re

Citation:

Toujours coincé au niveau de ...

Je ne saurai pas t'aider, je suis moi aussi débutant en jQuery/JavaScript, mon intervention dans ta discussion était de te permettre de donner les bonnes informations pour que SpaceFrog ou un autre forumeur puisse te donner les bonnes piste pour régler ton problème.
30/11/2018, 11h38
SpaceFrog

Code:

name="note"

=> la collection des elemetns ayant pour name "note :

Code:

$("[name='note']")

Je ne vois pas ce qui te pose souci ...
30/11/2018, 12h03
kinkon

Ce qui me pose souci c'est comment récupérer les notes saisies pour un traitement php
30/11/2018, 12h16
Toufik83

tu nous a donné juste le code html généré de la partie en rouge, alors qu'il nous faut le code html de toute la partie en vert.(voir l'image)

Pièce jointe 431256

déjà si tu met dans chaque ligne une forme avec le même id, c'est pas bon, par-ce que un id doit être unique dans une page html.

maintenant fais un Ctrl+U sur ta page, et copie nous tout le code de la partie verte.

Je pensais que j'ai bien expliqué la manière dont j'obtiens mon formulaire et ses différents champs ! En plus je voulais vous épargnez des codes php qui se trouvent à l'intérieur mais bon comme vous insistez je vais devoir reprendre les explications!!!

Code qui me donne la capture d'écran

Code:

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
/* Preparaton a la construction du tableau pour la saisie des notes des eleves de la classe choisie
			Requête sur la table classes_detudes
			*/
			$lcl=$connexion->query("SELECT * FROM classes_detudes WHERE id_an_scol='".$anant."' AND id_classe_scol='".$classe."'"); 
			if(!$lcl){
				echo"<div class='col-md-12 alert-danger text-center'><h4><i class='glyphicon glyphicon-warning-sign'></i> Une erreur interne s'est produite! Code : verif_form_periode_classe416 !</h4></div>"; //Veuillez informer l'administrateur de l'application (" . $connexion->errno . ") " . $connexion->error."</h4></div>";
				exit();
			}else{
				if(mysqli_num_rows($lcl)>=1){ $n=1; $i=1; $j=1; $k=1; $l=1; ?>
					<script type="text/javascript" src="../scripts/js/traitementenrnoteclasse.js"></script>
					<fieldset><legend>Veuillez remplir la fiche de note </legend>
						<!--/div-->
						<div class="row">
							<div class="col-sm-12 col-md-12 col-lg-12">
								<table class="table"><tr>
									<th>Classe : <?php echo $nomcl; ?></th><th> Mois : <?php echo $nommois; ?></th><th> Année scolaire : <?php echo $libelean; ?></th><th> Matière : <?php echo $nommat; ?></th></tr>
								</table>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 col-md-10 col-lg-8">
								<?php
 
								?>
								<form name="fiche" method="POST" action="" id="register_form1">
								<table class='table' align="center" width=80%>
									<thead><tr><th>N°</th><th>Matricule</th><th>Prénoms et Noms</th><th>Notes</th></tr></thead>
									<tbody><?php
										while($replcl=$lcl->fetch_assoc()){ $idelev=$replcl['id_elev']; 																?>
											<tr><td><?php echo $n++; ?></td>
												<td><?php 
													$sqlpn=$connexion->query("SELECT num_mat_elev, prenom_elev, nom_fam_elev FROM eleves WHERE id_elev='".$idelev."'");
													if(!$sqlpn){
														$erreursql="<div class='row'><div class='col-md-12 alert-danger text-center'><h4>Une erreur interne s'est produite! Veuillez informer l'administrateur de l'application (" . $connexion->errno . ") " . $connexion->error."</h4></div></div>";
													}else{
														if(mysqli_num_rows($sqlpn)>=1){ 
															while($repsqlpn=$sqlpn->fetch_assoc()){ $matricule=$repsqlpn['num_mat_elev']; $prenom=$repsqlpn['prenom_elev']; $nom=$repsqlpn['nom_fam_elev']; echo $matricule; 	}																
														}
														elseif(mysqli_num_rows($sqlpn)==0){ echo'Liste vide'; }
													} ?></td>
												<!-- Prénoms et Noms de l'élève -->
												<td><?php 
													echo $prenom.' '.$nom;
													  ?>
												</td>
												<!-- Note -->
												<td width=100>
												<input type="hidden" name="ide<?php echo $j++; ?>" value="<?php echo $idelev; ?>">
												<input type="text" class="form-control" id="note<?php echo $k++; ?>" name="note<?php echo $i++; ?>" placeholder="Note" value="" size=30>
												<span class="error_note"></span>
												</td>
											</tr><?php
										} ?>
 
									</tbody>
								</table>
									<input type="hidden" name="annee" value="<?php echo $anant; ?>">
									<input type="hidden" name="nmois" value="<?php echo $nmois; ?>">
									<input type="hidden" name="nclasse" value="<?php echo $classe; ?>">
									<input type="hidden" name="nmatiere" value="<?php echo $nmatiere; ?>">
									<input type="hidden" name="nbre" value="<?php echo $nbre; ?>" id="nbre">
									<input type="submit" name="sauvegarder" value="Enregistrer" id="sauvegarder" class="btn btn-primary pull-right">
									<img id="charge" src="/images/animee/chargeur1.gif"/>
								</form>
							</div>
						</div>
					</fieldset><?php
				}

Et si vous regarder très bien ce code vous allez vous rendre compte que mes champs input n'ont pas le même id à cause de l'incrémentation de variable $k en espérant que vous n'allez pas vous plaindre de la présence du code PHP!

30/11/2018, 12h40
Toufik83

tu n'as pas fais un Ctrl+U dans la page, tu as copié le code depuis ton éditeur de code :?

exécute ta page qui affiche la liste, quand le chargement est terminée, fais un CTRL+U, tu verra qu'un onglet vient de s'ouvrir, copie le code tel qu'il est et c'est tout, c'est ça ce qu'on appelle le code source d'une page.
30/11/2018, 12h46
SpaceFrog

Ben je t'ai tout donné pour y arriver ...

Code:

$("[name='note']")

boucle avec un each pour récupérer le val() de chacun et le pusher dans un array comme je le fais dans le fiddle ...

a toi ensuite de passer l'array a php avec un serialize ou autre ...
30/11/2018, 12h58
kinkon

Citation:

Envoyé par SpaceFrog

Ben je t'ai tout donné pour y arriver ...

Code:

$("[name='note']")

boucle avec un each pour récupérer le val() de chacun et le pusher dans un array comme je le fais dans le fiddle ...

a toi ensuite de passer l'array a php avec un serialize ou autre ...

Oh bon Dieu! Si tu vois que je traîne dessus encore c'est par ce que je ne sais pas comment boucler avec un each pour récupérer le val() de chacun ! Tout le monde n'est pas un As en JavaScript!
30/11/2018, 13h04
kinkon

Citation:

Envoyé par Toufik83

tu n'as pas fais un Ctrl+U dans la page, tu as copié le code depuis ton éditeur de code :?

exécute ta page qui affiche la liste, quand le chargement est terminée, fais un CTRL+U, tu verra qu'un onglet vient de s'ouvrir, copie le code tel qu'il est et c'est tout, c'est ça ce qu'on appelle le code source d'une page.

Je viens de faire Ctrl+U comme suggéré et j'avoue dans le code source je ne vois pas le code de mon formulaire! Et c'est vraiment bizarre pour moi!
Je dirais bien qu'il y a feu au lac là!
30/11/2018, 13h17
Toufik83
~~tu ne vois pas le code par-ce que tu fais des erreurs en php, comme par exemple :~~
Code:

1 2 3 <?php while($replcl=$lcl->fetch_assoc()){ $idelev=$replcl['id_elev'];//là tu dois fermer le php avec "?>" avant de mettre <tr><td>... <tr><td><?php echo $n++; ?></td>
pour poursuivre le traitement, il faut d'abord avoir un code html correcte !
c'est pour ça que j'insistais de voir le code source.

C'est bel et bien fermé ! Tu n'as pas bien prêté attention tu as juste à faire défiler l'ascenseur horizontal pour voir la fermeture!

N.B: En plus je peux contrôlé le formulaire en question avec PHP malgré que le nombre de champ soit variable!

Le problème c'est JavaScript et tu m'as aidé (Toufik83) à résoudre une partie de ce problème car tous les champs sont contrôlés avec ce code!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $("#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'>"); } });
Ce qui reste c'est comment récupérées les valeurs de ces champs pour un traitement php avec ajax!

30/11/2018, 13h39
Toufik83

ah oui, je n'ai pas vu la fermeture, du coup je me disais comment se fait-il que php ne t'affiche pas une erreur...
je vais faire un teste pour lancer une requête ajax.
30/11/2018, 14h27
SpaceFrog

Code:

$("[name='note']").each( function(){ alert( $(this).val() ) })

le code du each est dans le fiddle ...

avec ce code je récupère l'id d'élève depuis l'input qui précède le .form-control (vu que tu as mis $idelev dans l'attribut value).
puis je pense que tu as compliqué le code avec les $k et $i, $n, pourquoi ne pas utiliser $idelev tout simplement ?

Code:

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
 
$(document).ready(function(){
	var donnee=[]
	,id
	,note;
	$('#register_form1').submit(function(e){
		e.preventDefault();
 
		donnee=[];//rénitialiser la table "donnee" a chaque submit
 
		$(this).find('.form-control').each(function(){
			id=$(this).prev('input').val();//récuperer l'id de l'élève
			note=$(this).val();//récuperer la note
			donnee.push({id_eleve:id,note_eleve:note});//ajout des items dans la table "donnee"
		});
 
		$.ajax({
			url:'/appgesco/scripts/php/verif_form_enr_note_classe.php',
			method:'post',
			data:{d:donnee},//important/
			dataType:'json',//important
			cache:false,
			success:function(s){
				/*affiche le success dans la console*/
				console.log('success :'+JSON.stringify(s));
 
				/*parcourir le résultat*/
				$.each(s,function(k,v){
					console.log('id_eleve :'+v.id_eleve+", note_eleve :"+v.note_eleve);
				});
				},
				error:function(err){
					alert('Erreur ajax :'+err.responseText);
				}
		});
 
	});
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php 
$retour=$_POST['d'];
$id_eleve;$note_eleve;
 
/*
pour l'insertion il va falloir vérifier d'abord que les notes: 
	1-Ne sont pas vides
	2-Sont bien des chiffres
	puis parcourir la variable $retour avec un foreach par exemple :
	foreach($retour as $key=>$v){
		$id_eleve=$v['id_eleve'];
		$note_eleve=$v['note_eleve'];
	}
*/
echo json_encode($retour);
?>

30/11/2018, 15h36
kinkon

SpaceFrog s'il te plaît donne moi le code complet me permettant de résoudre ce problème qui me fracasse la tête!
30/11/2018, 15h39
SpaceFrog

Personnellement je ne suis pas ici pour délivrer du code tout fait ...
Il n'y a rien de compliqué a comprendre la boucle each sur le collection des names ...

Tu es proche du but... encore un petit effort.
30/11/2018, 16h22
kinkon

OK Toufik83 je vérifie!

1 pièce(s) jointe(s)

Merci beaucoup Toufik83 le code fonctionne mais il y a quelques soucis!

Code:

1
2
3
4
 
error:function(err){
	alert('Erreur ajax :'+err.responseText); // S'exécute même en cas de succès!
}

Le message d'erreur ajax s'affiche même en cas de succès!

Et en cas de succès le code suivant ne s'exécute pas sous la console

Code:

1
2
3
4
 
$.each(s,function(k,v){
	console.log('id_eleve :'+v.id_eleve+", note_eleve :"+v.note_eleve); // Ne s'exécute pas sous la console
});

J'ai un peu modifier le code php de test

Code:

1
2
3
4
5
6
7
8
9
 
if(isset($_POST['d'])){		
		$retour=$_POST['d'];
		foreach($retour as $key=>$v){
			$id_eleve=$v['id_eleve'];
			$note_eleve=$v['note_eleve'];
			echo " ID Eleve : ".$id_eleve.' Note : '.$note_eleve.";";
		}
}

Le code js complet

Code:

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
 
$(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'>");
			}
	});
 
	var donnee=[]
	,id
	,note;
	$('#register_form1').submit(function(e){
		e.preventDefault();
 
		donnee=[];//rénitialiser la table "donnee" a chaque submit
 
		$(this).find('.form-control').each(function(){
			id=$(this).prev('input').val();//récuperer l'id de l'élève
			note=$(this).val();//récuperer la note
			donnee.push({id_eleve:id,note_eleve:note});//ajout des items dans la table "donnee"
		});
 
		$.ajax({
			url:'/appgesco/scripts/php/verif_form_enr_note_classe.php',
			method:'post',
			data:{d:donnee},//important/
			dataType:'json',//important
			cache:false,
			success:function(s){
				/*affiche le success dans la console*/
				console.log('success :'+JSON.stringify(s));
 
				/*parcourir le résultat*/
				$.each(s,function(k,v){
					console.log('id_eleve :'+v.id_eleve+", note_eleve :"+v.note_eleve);
				});
			},
			error:function(err){
				alert('Erreur ajax :'+err.responseText);
			}
		});
 
	});
});

Et voici le résultat après exécution :
Pièce jointe 431406

Voir 40 message(s) de cette discussion en une page