Récupération de données d'un formulaire PHP/JavaScript

Résolu
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

J'ai récupéré et adapté à mes besoins des bouts de code afin de me créer un site de gestion de mes vidéos.
Je souhaite intégrer des infos sur des acteurs et pour cela je constitue un formulaire PHP, mais je souhaite pouvoir ajouter dynamiquement des lignes à la volée à ce formulaire.
Cette partie fonctionne correctement.

Mais mon problème est que je ne sais pas comment récupérer les données du formulaire dans une autre page PHP (sur la même page non plus d'ailleurs).

Je pense qu'il faut faire un tableau avec les variables, mais je ne sais pas comment faire.

Je vous joins le code, il est constitué de :

- une page pour le formulaire : formulaire.php
- une page javascript associée au formulaire : javascript.js
- et de la page où je souhaite récupérer les données : recup_donnees.php

Par avance merci pour votre aide.


formulaire.php : 

<!DOCTYPE html>
<html>
 <head>
  <meta charset=UTF-8" />
  <title>My VidéoThèque</title>
 </head>

 <body>
  <div align="center">
     <h1>Formulaire de récupération de données</h1>

  <form id="form_acteurs" action="/recup_donnees.php">
   <table id="acteurs">
    <thead>
     <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Date de naissance</th>
      <th>URL photo</th>
 
      <th>Actions</th>
     </tr>
    </thead>
     
    <tfoot>
     <tr>
      <td colspan="4"><button type="button" id="ajouter_ligne">Ajouter une ligne</button></td>
     </tr>
    </tfoot>
 
    <tbody>
    </tbody>
   </table>
   <p class="submit">
    <button type="button" id="modifier" disabled="disabled">Modifier</button>
    <button type="submit" id="valider" class="important">Valider</button>
   </p>
  </form>

  <input type="button" onclick="send_data()" value="Envoyer les données">
 </div>

 <script src="javascript.js"></script>

</body>
</html>



javascript.js : 

(function (){
 var champs = [
  "prenom",
  "nom",
  "date_de_naissance",
  "url_photo"
 ],

 modifier = document.getElementById("modifier"),
 valider = document.getElementById("valider"),
 ajouter_ligne = document.getElementById("ajouter_ligne"),
 table = document.getElementById("acteurs"),
 form = document.getElementById("form_acteurs");

 function action_valider (){
  champs_disabled(true);
  valider.disabled = true;
  modifier.disabled = false;
 }
 
 function action_modifier (){
  champs_disabled(false);
  valider.disabled = false;
  modifier.disabled = true;
 }

 function champs_disabled (disabled) {
  var i,c = table.tBodies[0].getElementsByTagName("input"),
  l = c.length;
  for (i = 0; i < l; i++) {
   c[i].disabled = disabled;
  }
 }

 form.onsubmit = function (){return false;}
 modifier.onclick = action_modifier;
 valider.onclick = action_valider;
 
 ajouter_ligne.onclick = function (){
  var i, supprimer,
  tbody = table.tBodies[0],
  ligne = tbody.insertRow(-1);

  function champ (name, value) {
   var t = document.createElement("input");
   t.type = "text";
   t.name = t.id = name +"[]";
   t.value = value || "";
        return t;
  }

  for (i = 0; i < champs.length; i++) {
   (ligne.insertCell(i)).appendChild(champ(champs[i]));
  }

  supprimer = document.createElement("button");
  supprimer.type = "button";
  supprimer.className = "del";
  supprimer.innerHTML = "×";
  supprimer.onclick = function (){
   var tr = this.parentNode.parentNode;
   index = tr.sectionRowIndex;
   tbody.deleteRow(index);
   valider.disabled = false;
   modifier.disabled = true;
  };
 
  i = ligne.insertCell(champs.length);
  i.className = "actions";
  i.appendChild(supprimer);

  var n, nt, inputs, index;
  for (var n = 0, nt = tbody.rows.length; n < nt; n++) {
   inputs = tbody.rows[n].getElementsByTagName("input");
   index = tbody.rows[n].sectionRowIndex;
   for (var nn = 0, ntn = inputs.length; nn < ntn; nn++) {
    inputs[nn].id = inputs[nn].name = inputs[nn].name.replace(/\[\d*\]$/, "["+index+"]");
   }
  }
 
  valider.disabled = false;
  modifier.disabled = true;
 };
})();



recup_donnees.php : 


<!DOCTYPE html>
<html>
 <head>
  <meta charset=UTF-8" />
  <title>My VidéoThèque</title>
 </head>

 <body>
  <div align="center"><b><center>Récupération des données et ajout à la base de données</center></b></div>
    <?php
     print_r $array;
     // Je traiterais le tableau de données quand cela fonctionnera :-)
    ?>



Encore merci pour votre aide.


Sébastien

Configuration: Windows / Firefox 94.0
A voir également:

29 réponses

Précédent
  • 1
  • 2
Réponse 21 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Mais aucune erreur quand je clique sur "Ajouter une ligne".
0
Réponse 22 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Désolé,

Voici ce que j'ai pu trouver :




Quand je clique sur le bouton "Ajouter une ligne" il ne se passe rien dans la console du navigateur.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu as deux erreurs dans le js lignes 43 et 92 à corriger
0
Réponse 23 / 29
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Je viens d'aller voir ta page : https://bluray4.domunix.fr/formulaire.php

Je vois que ça marche maintenant..
Tout est bon.
Tu penseras à fermer la discussion.


0
Réponse 24 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,

Désolé, je suis en formation Oracle Administrateur toute la semaine, je vais pas tarder à reprendre.

Voici ce que j'ai modifié :

javascript.js : 

(function (){
	var champs = [
		"prenom",
		"nom",
		"date_de_naissance",
		"url_photo"
	],
	
	ajouter_ligne = document.getElementById("ajouter_ligne"),
	table = document.getElementById("acteurs"),
	form = document.getElementById("form_acteurs");
	
		ajouter_ligne.onclick = function (){
		var i, supprimer,
		tbody = table.tBodies[0],
		ligne = tbody.insertRow(-1);

		function champ (name, value) {
			var t = document.createElement("input");
			t.type = "text";
			t.name = t.id = name +"[]";
			t.value = value || "";
        return t;
		}

		for (i = 0; i < champs.length; i++) {
			(ligne.insertCell(i)).appendChild(champ(champs[i]));
		}

		supprimer = document.createElement("button");
		supprimer.type = "button";
		supprimer.className = "del";
		supprimer.innerHTML = "×";
		supprimer.onclick = function (){
			var tr = this.parentNode.parentNode;
			index = tr.sectionRowIndex;
			tbody.deleteRow(index);
			valider.disabled = false;
			modifier.disabled = true;
		};
 
		i = ligne.insertCell(champs.length);
		i.className = "actions";
		i.appendChild(supprimer);

		var n, nt, inputs, index;
		for (var n = 0, nt = tbody.rows.length; n < nt; n++) {
			inputs = tbody.rows[n].getElementsByTagName("input");
			index = tbody.rows[n].sectionRowIndex;
			for (var nn = 0, ntn = inputs.length; nn < ntn; nn++) {
				inputs[nn].id = inputs[nn].name = inputs[nn].name.replace(/\[\d*\]$/, "["+index+"]");
			}
		}
	};
})();


Ce script pourra certainement servir à d'autres.

Merci beaucoup pour ton aide.

Sébastien
0

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

Posez votre question
Réponse 25 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Cela renvoi bien les variables du formulaire :

Valeurs contenues dans POST
array(7) { ["prenom"]=> array(2) { [0]=> string(10) "Sébastien" [1]=> string(5) "Nancy" } ["nom"]=> array(2) { [0]=> string(7) "DUPONT" [1]=> string(7) "DUPONT" } ["datenaissance"]=> array(1) { [0]=> string(10) "2021-12-15" } ["url"]=> array(1) { [0]=> string(13) "sebastien.jpg" } ["date_de_naissance"]=> array(1) { [1]=> string(10) "01/01/1981" } ["url_photo"]=> array(1) { [1]=> string(9) "nancy.jpg" } ["send_data"]=> string(0) "" }


Plus qu'à traiter cela!
0
Réponse 26 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai toujours un soucis, la première ligne vient du PHP, avec les variables : 

<input type="text" name="prenom[]">
<input type="text" name="nom[]">
<input type="date" name="datenaissance[]">
<input type="text" name="url[]">


et les lignes ajoutées viennent du javascript : 

var champs = [
		"prenom",
		"nom",
		"date_de_naissance",
		"url_photo"
	],

function champ (name, value) {
			var t = document.createElement("input");
			t.type = "date";
			t.name = t.id = name +"[]";
			t.value = value || "";
        return t;
		}

		for (i = 0; i < champs.length; i++) {
			(ligne.insertCell(i)).appendChild(champ(champs[i]));
		}


Comment modifier le javascript pour avoir 4 variables distinctes et pouvoir définir le type de variable, text ou date ?


Par avance merci,

Sébastien
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Déjà, tu peux virer les input que j'ai mis manuellement... pour ne garder que celles générées par ton JS


Ensuite, chaque variable est un array contenant les valeurs de chaque lignes
par exemple 

$prenom = !empty($_POST['prenom']) ? $_POST['prenom'] : null;

foreach($prenoms as $ligne => $P ){
  echo $ligne . " : " . $P . "<br>";

}
0
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Oui, mais je préfère garder tes input, comme cela je n'ai pas besoin de cliquer sur ajouter pour avoir la première ligne.

Mon problème est que le champ "date_de_naissance" est au format "text" et non "date" dans le javascript.

C'est pour cela que je voudrais déclarer les variables séparément.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Déjà, Dans les input que je t'ai donné, remets les mêmes "name" que ceux du JS
Pour le format date, dans ton JS également tu spécifier le "type" ( il existe le type="date" pour les dates )

Il y aurait pleins de façons de procéder ..
mais là, pour ton cas précis en allant au plus simple 
function champ (name, value) {
			var t = document.createElement("input");
			t.type = name =='date_de_naissance' ? 'date' :  "text";
			t.name = t.id = name +"[]";
			t.value = value || "";
        return t;
		}
0
Réponse 27 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Tu es un chef !!!

C'est tout nickel, merci encore !
0
Réponse 28 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
sinon, 

$prenom = !empty($_POST['prenom']) 
?  $_POST['prenom'] : null;
foreach($prenom as $ligne => $P ){
 echo $ligne . " : " . $P . "<br>";
}


Cela ne fonctionne pas :

[Mon Dec 13 19:03:53.172035 2021] [proxy_fcgi:error] [pid 11175:tid 140657628804864] [client 192.168.1.112:54945] AH01071: Got error 'PHP message: PHP Parse error: syntax error, unexpected '$_POST' (T_VARIABLE) in /web/bluray4/ajout_formulaire.php on line 10', referer: https://bluray4.domunix.fr/formulaire.php
0
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
J'abuse !!!
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
J'ai édité ton message pour y mettre la correction
Il manque un ? 
$prenom = !empty($_POST['prenom']) 
?  $_POST['prenom'] : null;
0
Réponse 29 / 29
slefevre77 Messages postés 33 Date d'inscription   Statut Membre Dernière intervention  
 
Nickel, je vais m'amuser pour la suite.

Bonne soirée !!!

et un GRAND merci !
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Pense à marquer la discussion en résolue
et n'hésite pas à créer une nouvelle discussion sur le forum si tu rencontres de nouvelles difficultés.
0

Discussions similaires

Colis shein terminal fret
Lele -
bazfile -

1 réponse
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses