Récupérer des valeurs dans des input

Résolu/Fermé
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 - 17 mai 2013 à 17:50
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 - 29 mai 2013 à 09:35
Bonjour,
Je récupère des donnees de ma base de données et je les affiche dans des input par une boucle while .
Sur ces données (nombreuses ? 600) lorsque je clique sur une case donnée, je la fais changer de couleur de fond par un script javascript qu'un programmeur m'a fourni gentiment.
(je suis absolument et totalement novice en JS)
Je souhaite enregistrer les valeurs modifiées de mes cases (couleur, texte).
Processus :
Je modifie mes input (value, color° de toutes les cases souhaitées et j'enregistre l'ensemble.
Comment procéder pour l'enregistrement des modifs effectuées ?????

53 réponses

jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
27 mai 2013 à 16:44
Wahou pour un lundi matin après le premier café de la journée je m'épate ! Comme quoi.
Tien moi au courant oui ;-)
2
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
Modifié par jeremy.s le 28/05/2013 à 23:28
$('td').each(function(){ // Dans chaque td, pour on parcourt ton tableau
var c = $(this).find(':first-child').attr('class'); // Je récupère la class du premier enfant du td (this), donc l'input visible sur le quel tu clique
$(this).find(':nth-child(2)').attr('value', c); // On donne au deuxieme enfant, donc l'input hidden, la variable c qui contient la class à l'attribu value
});


function switchColor(e) { // e correspond à l'input sur le quel tu as cliqué
e.className = "color" + ((e.className.substring(5)%4)+1) // On dit que la class de l'input est "color" + l'actuelle couleur +1 (%4 te permet de recommencer à 1 quand tu arrive à 4)
majInput(); // On appelle la fonction qui va remetre à jour les input type hidden car on l'a changé
}


Jérémy
2
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
17 mai 2013 à 20:44
Salut !

Tu renvois ton formulaire vers un fichier PHP qui fait un update des valeurs :)
C'est de la PDO de base, regarde sur le net des tuto sur l'envois de formulaire et la PDO en php. Tu trouveras ton bonheur j'en suis sur ;-)

Mais en gros :
La tu génères ton formulaire avec des input rempli
L'utilisateur va changer des valeurs, et valider le formulaire.
Tu vas alors envoyé le formulaire vers une page (<form action="post" method="updateValues.php">), et dans cette page php tu auras accès à toutes les valeurs sur formulaire grace à la variable $_POST qui est un tableau associatif qui contient tous les inputs et les values.
Donc si par exemple tu as le formulaire suivant :
<form action="post" method="page.php">
<label>Nom : </label><input type="text" name="nom">
<label>Prenom : </label><input type="text" name="prenom">
<input type="submit" value="Valider">
</form>

Sur la page.php $_POST['nom'] et $_POST['prenom'] correspondront au contenu rempli dans les input respectifs.
Tu peux faire ce que tu veux avec ces valeurs, mais toi tu vas les inséré dans ta BDD. Donc faire un update table set nom="$_POST['nom']" and prenom="$_POST['prenom']" par exemple
1
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
18 mai 2013 à 07:46
Merci de ta réponse.
J'avais bien compris le processus. Par contre, j'ai plusieurs questions :

1°) Dois-je vérifier une à une toutes les variables avec :
if (isset($_POST['XXX']))
{
	$XXX = htmlspecialchars($_POST['XXX']);
}

J'ai environ 6OO variables !....
2°) Comme je te l'ai dit, j'ai un petit bout de code JS qui me permet de colorer mes input en cliquent dedans tel que décrit ci-après :

Dans le head :
<script type="text/javascript">
function switchColor(e) {
e.className = "color" + ((e.className.substring(5)%3)+1)
}
</script>
<style>
.color1 { background:green; }
.color2 { background:gray; }
.color3 { background:red; }
</style>

et dans l'input :
<input type ="text" name = "nom" value = "<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" />

Comment faire pour envoyer la couleur dans le post ?

3°) Dans ta réponse, tu m'indiques de faire
<form action="post" method="updateValues.php">

Ne serait-ce pas plutôt :
<form action="updateValues.php" method="post">
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
18 mai 2013 à 22:26
1) Effectivement ca fait beaucoup ... Si elles sont fixes et que t'as du courage, fais toi une fonction !
Mais autre solution :
Si tous tes input doivent être rempli, tu peux mettre l'attribut required, qui permet de rendre obligatoire l'input, et donc le formulaire ne s'envoie pas si les input ne sont pas rempli.
Tu peux donc déjà en mettre là où tes input sont obligatoire, et tu coup t'es sur qu'il y aura quelque chose dedans en $_POST, et donc seulement vérifié if(isset($_POST))
Sinon si tu tiens vraiment à la sécurité et au controle des inputs enplus du required, fais toi une fonction en js, qui parcours chaque input du form et regarde les contenu (met des class pour ceux qui n'ont que des int dedans, que des lettres, comme ca suivant la class tu peux checké tout ca)

2) J'ai pas très bien compris ...
Mais si tu veux envoyé une variable js au PHP, une seule solution : AJAX
Si ta couleur est dans un input, c'est bon ;-)
Sinon tu fais un input type="hidden" et en value tu met lui donne ta couleur (soit en remplissant avec une fonction js, soit tu l'as et tu peux le renseigné)

3) Oui c'est bien <form action="updateValues.php" method="post">, petit erreur de ma part !
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
Modifié par janmar le 19/05/2013 à 09:35
merci de tes réponses.
Les questions 1 et 3 sont réglées. Reste la 2.
Dans mon code, tu vois qu'il y a la fonction JS qui attribue la couleur à l'input, par clics successifs.
<input type ="text" name = "nom" value = "<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" />

Je ne sais pas comment récupérer cette valeur pour la mettre dans mon post.
Je pense que c'est une variable JS ? Mais en fait, on a bien coloré la case. Donc, il doit bien avoir une variable html qui se balade dans l'input ?
J'ai essayé :
<input type = "hidden" colorcase = "switchColor";

mais ça ne marche pas.
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
19 mai 2013 à 18:45
La couleur c'est la class de l'input c'est ca que tu veux envoyé ?
0
Oui, c'est bien la classe que je souhaite récupérer pour m'indiquer la couleur.
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
21 mai 2013 à 14:30
Ok bah je te propose ca alors :

<input type="text" name="nom" value="<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" />

<input type="hidden" name="couleurClass" onload="chargerCouleur(this)" value="">

<script>
function chargerCouleur(){

$(this).attr('value', $('#centre').attr('class'));

}
</script>
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
Modifié par janmar le 21/05/2013 à 19:49
Merci de cette proposition.
Je pense que name = "couleurClass" n'a pas d'importance. Pour identifier le nom de la case input, je l'appelle name = "couleur<?php echo $donnees['ordre'];?>". J'ai fait de même pour le nom de la case et ça se transmet bien.
Cela me donne nom1,nom2 etc.... ainsi que couleur1, couleur2 etc...
<input type="text" name="couleur<?php echo $donnees['ordre'];?>" value="<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" />

<input type="hidden" name="couleur<?php echo $donnees['ordre'];?>" onload="chargerCouleur(this)" value="">


Par contre, IMPOSSIBLE de transmettre la couleur de la case.
J'ai essayé de mettre le script JS dans le Head ou ailleurs, impossible, ça ne marche pas.
Excuse-moi de te poser cette question : Es-tu sûr du script ?
Moi, je n'y connais absolument rien en JS, je viens juste de commander un bouquin, mais je ne l'ai pas encore reçu.
Si tu pouvais me faire marcher ça, tu me rendrais un très grand service.
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
21 mai 2013 à 19:52
et encore, je me demande si de cette manière je peux identifier une couleur d'une case input si elle n'a pas été déterminée par le onclick ??
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
21 mai 2013 à 20:06
C'est du jQuery, donc il faut que tu importes la librairie ! Si tu ne l'utilise pas, je peux te faire équivalent en js normal :)

Tu peux l'importé comme ceci :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Met ceci dans ton head et ca devrait allé :)
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
21 mai 2013 à 21:21
Bon, je n'y arrive pas. Je te passe mes PHP :
Dans le POST PHP:
Je mets dans le Head :
<script type="text/javascript">
function switchColor(e) {
e.className = "color" + ((e.className.substring(5)%3)+1)
}
</script>
<style>
.color1 { background:green; }
.color2 { background:gray; }
.color3 { background:red; }
</style>
<script>
function chargerCouleur(){
$(this).attr('value', $('#centre').attr('class'));
}
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


Dans le body :
<form method="post" action="traitement2.php">
<?php

	$bdd = new PDO('mysql:host=TTTT.mysql;dbname=UUUU', 'VVVVVV', 'WWWW', $pdo_options);
	$reponse = $bdd->query('SELECT planning.date_vacations, benevoles.nom, benevolat.vacation, benevolat.ordre, benevolat.id FROM planning RIGHT JOIN benevolat ON planning.id = benevolat.planning_id LEFT JOIN benevoles ON benevoles.id = benevolat.benevoles_id ');?>
	<table>
		<?php
		WHILE ($donnees = $reponse->fetch())
		{ 
			?>
			<tr>
				<span class="a"><td><input type ="text" name = "nom<?php echo $donnees['ordre'];?>" value = "<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" /></td></span>
				<input type="hidden" name="couleur<?php echo $donnees['ordre'];?>" onload="chargerCouleur(this)" value="" />
			</tr>
			<?php
		}
		$reponse->closeCursor(); // Termine le traitement de la requete
		?>	
	</table>
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT type="submit" value="Valider" />       <INPUT type="reset" value="Annuler" /></strong> 
	
</form>
</body>


Dans mon formulaire de réception :
$nb = 1;
	
while ($nb <= 675)
{
	$nomvariable = 'nom'.$nb;
	$color = 'couleur'.$nb;

	$nomnb = $_POST[$nomvariable];
	$valeur = $_POST[$color];
	echo 'nomvariable = '.$nomvariable.','.'valeur = '.$nomnb.','.'couleur = '.$valeur;?><br><?php
	$nb = $nb +1;
}


Je reçois bien les noms des variables nom --> nom1,nom2,nom3
mais pas de valeur pour la couleur ?????

Est-ce que j'ai bien compris l'histoire du JQUERY ?
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
22 mai 2013 à 19:15
Il faut mettre le <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
tout en haut avant tout code js !
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
22 mai 2013 à 20:15
J'ai bien tout essayé :
. Avant ton message : comme indiqué ci-dessus dans le head --> ne marche pas
. Tout en haut avant tout code html -----> pas de variable couleur transmise
. Juste après le head -----> pas plus


Je ne vois plus très bien ce qu'il faut faire ?
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
22 mai 2013 à 21:28
Ok essaye ca :

Dans le head
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function($){ alert('jQuery ok');});
</script>
<script type="text/javascript">
function switchColor(e) {
e.className = "color" + ((e.className.substring(5)%3)+1)
}
</script>
<style>
.color1 { background:green; }
.color2 { background:gray; }
.color3 { background:red; }
</style>

Dis moi si tu as le alert !
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
23 mai 2013 à 08:40
oui, j'ai bien jQuery pk
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
23 mai 2013 à 14:53
Donc c'est cool c'est bien chargé ! J'ai du le planté qq part, je vais reprendre ma fonction :)

Pour le input :
<input id="idInputCouleur" type="hidden" name="couleur<?php echo $donnees['ordre'];?>" value="" />

Pour le js :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function($){
$('#idInputCouleur').attr('value', $('#centre').attr('class'));
});
</script>
<script type="text/javascript">
function switchColor(e) {
e.className = "color" + ((e.className.substring(5)%3)+1)
}
</script>
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
23 mai 2013 à 16:08
Bon, voilà, ça commence à bouger dans le résultat :
Je reprends le cours des choses :
Pour créer mes input, je les colore TOUS en vert pour commencer (color1).
Voilà la création du formulaire :
<span class="a"><td><input type ="text" name = "nom<?php echo $donnees['ordre'];?>" value = "<?php echo $donnees['ordre'];?>" id="centre" class="color1" onclick="switchColor(this)" size="25" maxlength="28" /></td></span>

Puis, je change la couleur de certaines cases en cliquant dans l'input. C'est le onclick qui joue son rôle et qui fait changer la couleur.
Lorsque je valide le formulaire, j'envoie dans une page PHP.
Je récupère les données par la boucle suivante
$nb = 1;	
while ($nb <= 675)
{
	$nomvariable = 'nom'.$nb;
	$color = 'couleur'.$nb;
	echo $nomvariable.','.'valeur = '.$_POST[$nomvariable].','.'couleur = '.$_POST[$color];?><br><?php
	$nb = $nb +1;
}

je reçois :
nom1,valeur = 1,couleur = color1
nom2,valeur = 2,couleur =
nom3,valeur = 3,couleur =
nom4,valeur = 4,couleur =
C'est bizarre, je ne reçois que color1, pour n'importe quelle couleur de l'input ?
Il doit y avoir un problème je pense dans la dénomination de la variable color que j'envoie dans le Post !... mais je ne vois pas ..
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
23 mai 2013 à 16:14
Ah y'en a plusieurs !
Donc enfaite il faudrait appliqué mon petit code js pour chaque input c'est ca ?
0
janmar Messages postés 148 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 29 août 2015 3
23 mai 2013 à 16:21
Et ben oui, il y en a 675.
Ne sois pas étonné, il s'agit d'un planning regroupant 3 vacations par jour, avec 5 bénévoles par vacation soit 15 input(s) par jour et 675 pour une période d'un mois 1/2.
je pensais appeler mes variables color1,color2 ....... color 675.
Mais ce qui m'inquiète, c'est que le onclick fait bien changer l'input de couleur, sans retrouver celle-ci dans la réception du POST.
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
23 mai 2013 à 16:39
Ok ok bah ca devrait pas posé de problème ;-)
Donc je pense tu génères le input type="hidden" alors, donc il y en a autant que les autres.

Bon alors deux solutions, mais peux tu mettre un bout du code source de la page une fois généré stp ?
Genre 4/5 td pas les 675 ^^
Pour avoir la bonne structure finale
0