Récupérer des valeurs dans des input
Résolujanmar Messages postés 154 Statut Membre -
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
- 1
- 2
- 3
Le problème est de sauvegarder les valeurs modifiées dans des inputs générés par une boucle à partir de données, notamment la couleur de fond et le texte, lors d’un clic. Des solutions consistent à conserver côté client des champs cachés ou une structure d’inputs nommés, puis à envoyer l’ensemble vers un script serveur via formulaire ou AJAX. Une approche courante consiste à générer un formulaire avec des inputs visibles et des inputs cachés, transmettre les valeurs via POST, puis mettre à jour la base via PDO côté serveur. D’autres méthodes modernes privilégient l’envoi asynchrone des modifications sous forme d’objet JSON et une mise à jour groupée, évitant le rechargement et facilitant le suivi des changements.
-
Wahou pour un lundi matin après le premier café de la journée je m'épate ! Comme quoi.
Tien moi au courant oui ;-)
-
$('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 -
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
-
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">
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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 !
-
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. -
La couleur c'est la class de l'input c'est ca que tu veux envoyé ?
-
-
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>
-
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. -
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é :)
-
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> <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 ? -
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 !
-
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 ? -
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 !
-
-
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>
-
-
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 .. -
Ah y'en a plusieurs !
Donc enfaite il faudrait appliqué mon petit code js pour chaque input c'est ca ?
-
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. -
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
- 1
- 2
- 3