Modifier le contenu d'une page php en fonction du choix d'un select

Version imprimable

18/02/2016, 10h57
Ophiucus02

Modifier le contenu d'une page php en fonction du choix d'un select

Bonjour,

J'ai un problème pour réaliser la demande de l'intitulé du message.

J'ai une page PHP contenant un formulaire qui contient lui même un select et une table remplie à partir de la lecture d'une base.
Au lancement de la page le select est sur "Choix du matériel" et la table est vide.
Après un changement du select je veux remplir la table en allant chercher des informations dans une base (la table contient des inputs pour mettre à jour les informations).
Au final je valide le formulaire et met à jour la base.

Voilà pour le fonctionnement.
Difficilement j'ai réussi à récupérer en jquery la valeur de l'option du select mais je ne réussi pas à retourner cette valeur dans la page php pour aller dans la base chercher les valeurs et mettre à jour ma table.

De plus, j'aimerais que le select laisse option affichée pour savoir ce que l'on modifie.

Merci pour votre aide.

Cordialement
18/02/2016, 19h36
NoSmoking

Bonjour,

Citation:

Au final je valide le formulaire et met à jour la base.

tu utilises Ajax ou la soumission normale via un formulaire ?

Citation:

Difficilement j'ai réussi à récupérer en jquery la valeur de l'option du select

Sais tu qu'il existe
:faq: Comment puis-je obtenir les paramètres de l'option choisie (select option) ?, entre autres ?

N'aurais tu pas un morceau de code pour que l'on puisse se rendre compte où tu coinces ?

Merci NoSmoking pour ta réponse.

Oui, lorsque le formulaire est rempli je vais le soumettre pour mettre à jour la base.
Mais avant je veux sélectionner le formulaire en fonction du choix du select.

Mon problème est en gras dans ma portion de code (ma page s'appelle test.php).

Voici mon code :

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
	echo '<form action="attribution.php" method="post" id="formulaire3">';
	echo '<div style="margin:auto;width:30%;">';
	echo '<center><select class="affichage" name="produit" id="produit">';
	echo '<option value="0" selected="selected" />Produits à attribuer</option>';
	for ($i=1;$i<=$m;$i++) {
		echo '<option class="option" value="'.$id[$i].'" />'.$nom[$i];
	}
	echo '</select>';
	echo'<br />&nbsp;<br />';
	if (isset($_POST['produit'])) {$produit=$_POST['produit'];} else {$produit=0;}
	echo $produit;
	echo '<center><br />&nbsp;<br />
		<input type="hidden" name="nombre" value="'.$n.'" />
		<input type="hidden" name="produit" value="'.$produit.'" />
		<input type="submit" value="Soumettre" class="bouton" />
		<br />&nbsp;<br /></center>';
	echo '</div>';
	echo '</form>';
?>
<script type="text/javascript">
	$(document).ready(function() { 
		$('#produit').change(function () {
			var produit=$('select[name=produit]').val();
			$.ajax({
				type	: $this.attr('method'),
				url		: 'test.php',
				data	: $this.serialize(),
				success	: function(html) {alert(html);}
			});
		})
		.trigger('change');
	})
	$(document).ready(function() {
		$('#formulaire3').on('submit',function(e) {
			e.preventDefault();
			var $this = $(this);
			var produit=$('select[name=produit]').val();
			if (produit==0) {
				alert ('Choisir un produit à attribuer');
			} else {
				$.ajax({
					type	: $this.attr('method'),
					url		: $this.attr('action'),
					data	: $this.serialize(),
					success	: function(html) {alert(html);}
				});
			}
			return false;
		});
	});
</script>

18/02/2016, 21h37
NoSmoking

pour récupérer le parent d'un élément on peut utiliser

• .parent()
ou encore
• .closest()

Bonjour Ophiucus02 *,

c'est bien de connaitre la syntaxe, mais c'est mieux de la comprendre. :aie:

Pour bien comprendre et éviter les confusions, j'ai clairement différencier "produit", "idproduit", "val_produit", "id_produit" (qui ont chacun un rôle précis).
Dans la pratique, on peut utiliser le même nom de variable.

Pour récupérer la sélection choisie et la traiter via Ajax, on NE soumet PAS le formulaire !
On va aller chercher directement en jQuery dans le select la veluer choisie :

1/ HTML
Code:

1 2 3 4 5 6 <form action="attribution.php" method="post" id="formulaire3"> <select class="affichage" name="produit" id="idproduit"> ... </select> ... <div id="affichage_tableau_via_ajax"></div>
2/ jQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready(function() { // au changement du select : $('#formulaire3').on( 'change', '#idproduit', function() { // meilleure syntaxe ! var val_produit = $(this).val(); // la valeur sélectionnée du select. // $(this) puisque c'est sur '#idproduit' que la fonction pointe. // on peut aussi écrire : var val_produit = $('#idproduit').val(); $.ajax({ type : 'post', // on envoie en post url : 'test.php', // fichier de traitement PHP => Attention a bien vérifier le chemin (rrelatif, ou absolu) ! data : 'id_produit='+val_produit, // on transmet la donnée, qui sera récupérée par $_POST['id_produit'] success : function(txthtml) { // alert(txthtml); $('#affichage_tableau_via_ajax').html( txthtml ); // on affiche le résultat renvoyé par le fichier PHP dans le <div> } }); }); })
3/ PHP (fichier test.php) :
Code:

1 2 3 4 5 <?php // Traitement from Ajax // ICI : ne pas oublier d'ajouter le fichier de connexion (si besoin d'accéder à la base de données) $produitId = (isset($_POST['id_produit']))? $_POST['id_produit'] : 0; .... // suite du traitement PHP
PAR CONTRE, je vois aussi dans ton code :

Code:

<input type="hidden" name="produit" value="'.$produit.'" />

Ca ne sert plus à rien (ni la récup if $_POST['produit']....... ), puisque tout se passe via Ajax, EN DEHORS de la page.

* Tu es parent avec Optimus Prime ? :mrgreen:

20/02/2016, 15h26
Ophiucus02

Résolu

Merci jreaux62 pour ta réponse et le temps que tu as bien voulu me consacrer j'ai compris le fonctionnement $ajax({....}); : je mettais tout sur la même page au lieu de séparer le select et la page réponse php.

Cordialement