Envoi de variable JS en $_post

**Math71** · 13/11/2017, 10h50

Bonjour,

J'ai un formulaire de modification de de compte.
Je fais une validation des champs avec du JS et j'aimerais savoir comment passer une variable JS en $_post[].

J'ai trouvé beaucoup de chose sur internet mais rien que j'arrive a comprendre. Je précise je suis débutant en JS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form methode="post" action="index" name="modif">
<input name="nom" value="{{tableau.nom}}">
<input type="submit" onclick="modification({{tableau}})">

Je précise que le code ci-dessus est du volt.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function modification(tableau)
{
if (document.modif.nom != tableau.nom)
return document.modif.nom;
}

après avoir validé les champs, j'aimerai que la page se rafraîchisse en ayant envoyé les différentes modifications en $_POST pour les traiter dans le PHP.

Cordialement.

**JujuPomme** · 13/11/2017, 10h58

Hello,

Rien de compliqué. Petit exemple rapide :

Niveau HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<form type="POST" action="ton_fichier.php" id="id_du_formulaire">
<input name="input_name" value="blabla" >
</form>

Et niveau JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("id_du_formulaire").submit();

En le soumettant de cette manière, les variables de ton formulaire seront passées en POST et tu devrais être capable de les récupérer comme tu le souhaites.

Sauf erreur de ma part, ça devrait fonctionner, à toi de l'adapter

See yaa

**Math71** · 13/11/2017, 11h05

tous les champs de mon formulaire n'ont pas besoin d'ètre submit étant donné que je vérifie si il y a eu une modification.

si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("id_du_formulaire").submit();

je submit tous les champs si je me trompe pas.

j'ai peut ètre pas été assez clair.

Dans mon script je créé un tableau avec seulement les champs modifiés pour ne pas refaire une vérification dans le php.

Comment je passe mon tableau au PHP ?

**JujuPomme** · 13/11/2017, 11h33

Re,

Désolé de mon incompréhension du coup.

Je ne suis pas expert dans la solution que je vais te proposer donc celle-ci est peut-être fausse, mais renseigne toi du côté d'une requête AJAX : https://ajax.developpez.com/

**headmax** · 13/11/2017, 12h50

Pour envoyé un tableau PHP par l'intermédiaire d'un input tu doit d'abord serialiser ton tableau PHP comme ceci : lors de l'affectation de ta variable : {{tableau.nom}}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$tableau_nom_serialized = htmlentities(serialize($tableau['nom'])); //pour Pug
 
$pug = new Pug($tableau_nom_serialized);
 
<input type='hidden' name='nom' value="{{tableau.nom}}" />
 
//la page qui reçoit le post doit désérialiser les données avant de les manipuler.
$passed_array = unserialize($_POST['nom'])

**Math71** · 13/11/2017, 13h10

merci pour vos réponses.

je suis désolé mais je n'ai pas été clair je pense.

{{tableau}} est une STDClass
{{tableau.nom}} est un string

pour la création du formulaire je n'ai aucun problème, je récupère bien les données.

a la fin de mon formulaire j'ai cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" onclick="modification(tableau)">

(ne faites pas attention a l'écriture de l'appel de la fonction JS, je n'ai pas trouvé comment faire encore. (merci le volt...))

donc je souhaite appeler ma fonction "modification" qui prend en paramètre la STDClass (pour comparer les changements éventuels)

voici ma fonction JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function modification(tableau)
{
	var modif = new Array();
	if (document.modif.nom != tableau.nom)
	{
		modif['nom'] = document.modif.nom;
	}
}

c'est le tableau associatif "modif" que je souhaite passer en POST a mon controlleur (je suis en MVC)

donc pour le moment le code PHP je n'en ai pas.

j'espère avoir été clair cette fois et encore désolé pour ma première explication.

**headmax** · 13/11/2017, 14h32

Dans le cas de JavaScript tu peux soit sérialiser avec une lib qui te mâche le boulot avec Jquery et sa fonction https://api.jquery.com/serializeArray/ sinon tu as en JavaScript pur JSON.stringify qui vas transformer ton object javascript json en une seule chaine.

Côté PHP il faudra transformer cette chaine en tableau ou object

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
json_decode($_POST['nom']); // object   stdclass
json_decode($_POST['nom'], true); // ou array etc ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function modification(tableau)
{
	var modif = new Array();
	if (document.modif.nom != tableau.nom)
	{
		modif['nom'] = document.modif.nom;
	}
        var chaine_passer_en_post = JSON.stringify(modif['nom']);
}

**Math71** · 13/11/2017, 15h14

soit mon explication est pourri soit je n'y comprend rien....

le $_POST['nom'] contient le contenu de mon <input name='nom'> ou de modif ['nom'] ?

et je suppose que pour mon tableau associatif complet je doit faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var chaine_passer_en_post = JSON.stringify(modif);

car il n'y aura pas seulement le nom, j'ai fait un code simplifié.

**headmax** · 13/11/2017, 15h22

Ce que j'ai compris de ton explication, tu veux a partir d'un tableau js envoyé a PHP via un formulaire (submit) ou via ajax le contenue de ce tableau transformé en chaine pour que PHP puisse la transformer en un tableau ou un objet directement exploitable. la variable post utilisé doit être envoyé au script PHP qui soit rafraichit la page après le submit pour la mettre à jours soit l'utilisation d'un script ajax pourra faire la même chose sans rafraississement...

**Math71** · 13/11/2017, 15h47

on va reprendre l'explication.... (désolé)

après avoir aussi réfléchi de mon coté j'ai fait quelques modifications.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form methode="post" action="index" name="modif">
<input name="nom" value="{{tableau.nom}}">
<input name="nom" value="{{tableau.cpltNom}}">
<input type="submit" onclick="modification()">
</form>

code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function modification()
{
	var modif = new Array();
	if (document.modif.nom.value != document.truc.nom.value)
	{
		modif['nom'] = document.modif.nom.value;
	}
	if (document.modif.cpltNom.value != document.truc.cpltNom.value)
	{
		modif['cpltNom'] = document.modif.cpltNom.value;
	}
$_POST = modif //code a modifier en fonction de vos remarques
}

ma fonction JS est une fonction qui fera de la validation et regardera quels champs a été modifié.
les modifications que l'utilisateur a fait, je les mets dans un tableau associatif pour plus facilement faire traitement en PHP derrière.

je souhaite que mon tableau associatif soit envoyé au PHP en post, et du coup les champs dans le form n'ont pas besoin d'ètre envoyé.

**headmax** · 13/11/2017, 17h17

Envoyé par Math71

on va reprendre l'explication.... (désolé)

après avoir aussi réfléchi de mon coté j'ai fait quelques modifications.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
...
<form onsubmit="return false" method="post" action="index" name="modif">
<input name="nom" value="{{tableau.nom}}">
<input name="nom" value="{{tableau.cpltNom}}">
<input type="submit" onclick="modification()">
</form>

code JS :

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
19
20
21
function modification()
{
	var modif = new Array();
	if (document.modif.nom.value != document.truc.nom.value)
	{
		modif['nom'] = document.modif.nom.value;
	}
	if (document.modif.cpltNom.value != document.truc.cpltNom.value)
	{
		modif['cpltNom'] = document.modif.cpltNom.value;
	}
        $.ajax({
            method: "POST",
            url: "pagepost.php",
           data: { "champs_modifier": JSON.stringify(modif) }
        })
        .done(function( msg ) {
           alert( "Data Saved: " + msg.message );
           alert("success : " + msg.success);
       });     
}

le PHP pagepost.php

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
if(isset($_POST['champs_modifier']) && ...){
   //mon object ou array
   $arr = json_decode($_POST['champs_modifier'], true); //mes valeurs données a PHP et transformé en tableau
 
//test
//var_dump($arr);
//exit();
header('Content-Type: application/json');
$success = array('success'=> true, 'message'=>'ok de PHP');
echo json_encode($success);
}

Invité · 13/11/2017, 17h51

Bonjour,

Envoyé par Math71

soit mon explication est pourri soit je n'y comprend rien....

Les deux, mon capitaine !

(je suis le topic depuis ce matin, et je ne comprends toujours rien à tes "explications")

le $_POST['nom'] contient le contenu de mon <input name='nom'> ou de modif ['nom'] ?

Déjà, si tu mettais des noms de variables plus EXPLICITES - et différents suivant le contexte - on suivrait mieux...

Ensuite, au lieu de remettre à chaque fois des bouts de codes plus ou moins modifiés / rapiécés, va jusqu'au bout de l'explication avec des MOTS.
Tu auras déjà fait la moitié du chemin.

{{tableau}} est une STDClass
{{tableau.nom}} est un string

OK. Mais encore ?
Ce serait plus simple avec un EXEMPLE concret ("basique"), qu'on puisse tester.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input name="nom" value="{{tableau.nom}}">
<input name="nom" value="{{tableau.cpltNom}}">

2 input avec le même name...

**Math71** · 14/11/2017, 09h34

headmax merci pour le bout de code.

Malheureusement il ne fonctionne pas.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$_POST['champs_modifier']

n'existe pas.

les 2 alerts générés par AJAX m'affiche :

Date saved : undefined

sucess : undefined

jreaux62 je vais essayé de refaire une explication dans ce cas.

oubliez mes anciens messages, je recommence depuis le début.

index.volt

Code volt :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="modif.js"></script>
 
<form method="post" action="index" name="formModif">
<input type="hidden" name="hiddenNom" value="{{tableau.nom}}"> //pour comparer si l'utilisateur a fait une modification
<input type="hidden" name="hiddenCptlNom" value="{{tableau.cpltNom}}">
 
<input name="nom" value="{{tableau.nom}}">
<input name="cptlNom" value="{{tableau.cpltNom}}">
<input type="submit" onclick="modification()">
</form>

une erreur de part d'avoir nommé les 2 inputs avec le meme nom.

modif.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function modification()
{
	var champsModifie= new Array();
	if (document.formModif.nom.value != document.formModif.hiddenNom.value) //compare si il y a une modification
	{
		champsModifie['nom'] = document.formModif.nom.value;
	}
	if (document.formModif.cpltNom.value != document.formModif.hiddenCpltNom.value)
	{
		champsModifie['cpltNom'] = document.formModif.cpltNom.value;
	}
$_POST['champs_modifier'] = champsModifie; //envoi en post le tableau des modifications
}

Comptecontrolleur.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$r=new array('nom' => "toto", 'cpltNom' => "titi");
$this->view->tableau=$r; //envoi a la vue le tableau associatif
         if(isset($_POST['champs_modifier']))
         {
			echo "success"; 
		}

j'aimerai recevoir avec $_POST le tableau "champsModifie" généré avec le JS.

Voila il me semble avoir été clair.

Invité · 14/11/2017, 10h14

Bonjour,

en ce qui me concerne, ce n'est pas en recopiant les mêmes codes et en répétant les même "explications" que je vais mieux comprendre.

Déjà "tableau" signifie quoi ?

une table html <table> (dont les cellules sont éditables/modifiables) ?
un array ?

Dans le 1er cas :

"tableau editable jquery"
Dans phpMyAdmin, par exemple, dans le listing (= tableau <table>), il est possible de modifier le contenu d'un champ "à la volée" : un à la fois

Sinon :

Tu peux mettre une copie d'écran (formulaire, "tableau",...) ?
Un exemple de {{tableau.nom}} ?
Un exemple de {{tableau.cpltNom}} ?

**Math71** · 14/11/2017, 10h48

je suis désolé mais c'est tellement clair pour moi que je ne vois pas vos difficultés a me comprendre.

tableau est juste une variable envoyé a la vue (méthode MVC en utilisant Phalcon, surement mon oublie), qui est un array dans ce cas la.

{{tableau.nom}} correspond en PHP a tableau['nom'], c'est du volt, qui ressemble beaucoup au langage TWIG.

{{tableau.nom}}, dans mon exemple, affichera "toto".

j'ai mis mon code volt et PHP mais pour le coup il ne sert a rien, a part comprendre le nom de mes variables.

je cherche simplement a envoyé en JS un tableau dans la variable $_POST de PHP pour pouvoir faire ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$les_champs_modifiés = $_POST[nom_de_ma_variable]

et ma question est la suivante : comment j'envoie en methode post mon tableau contenant les modification de l'utilisateur ?

Invité · 14/11/2017, 12h22

Re.

Ce que je ne comprends pas, c'est que :

tu as DEJA un formulaire <form>
tu veux passer par JavaScript pour traiter les infos AVANT l'envoi

Alors qu'il suffit de les traiter APRES envoi, directement en PHP !

Mais bon. Supposons....

1- on ajoute un input hidden "champsModifie" au formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<form method="post" action="index" name="formModif">
	<input type="hidden" name="hiddenNom" value="{{tableau.nom}}"> //pour comparer si l'utilisateur a fait une modification
	<input type="hidden" name="hiddenCptlNom" value="{{tableau.cpltNom}}">
	<input type="hidden" name="champsModifie" value="">
 
	<input name="nom" value="{{tableau.nom}}">
	<input name="cptlNom" value="{{tableau.cpltNom}}">
 
	<input type="submit" onclick="modification();return false;">
</form>

2- en JS :

on met le resultat dans la value de l input "champsModifie"
on envoie le formulaire

Code JavaScript :

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
function modification()
{
	var champsModifie= new Array();
	if (document.formModif.nom.value != document.formModif.hiddenNom.value) //compare si il y a une modification
	{
		champsModifie['nom'] = document.formModif.nom.value;
	}
	if (document.formModif.cpltNom.value != document.formModif.hiddenCpltNom.value)
	{
		champsModifie['cpltNom'] = document.formModif.cpltNom.value;
	}
	// on met le resultat dans la value de l input "champsModifie"
	document.formModif.champsModifie.value = JSON.stringify( champsModifie ); 
	// on envoie le formulaire
	document.formModif.submit();
}

3- APRES soumission du formulaire, on récupère en PHP :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$champsModifie = json_decode( $_POST['champsModifie'] );

J'ai bon ?

**Math71** · 14/11/2017, 13h06

voila c'est exactement ça ! merci.

compliqué quand on comment son code et expliquer correctement la demande....

je répond quand meme a ta question :

Alors qu'il suffit de les traiter APRES envoi, directement en PHP !

Nous avons un controlleur (un fichier PHP) avec une multitude de vues suivant les différentes demandes des clients.

Donc compliqué de tout mettre dans le controlleur étant donné la variété des demandes....

Envoi de variable JS en $_post

JavaScript

Discussions similaires

Partager

Partager