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

Résolu
slefevre77 -  
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

29 réponses

Résumé de la discussion

La problématique porte sur la récupération des données d'un formulaire PHP qui permet d'ajouter dynamiquement des lignes pour saisir des acteurs et d'envoyer ces données sur une page distincte. La solution pédagogique évoquée privilégie des noms de champs en tableaux (prenom[], nom[], date_de_naissance[], url_photo[]) et une méthode POST pour récupérer chaque valeur côté serveur. Des conseils portent également sur l'utilisation d'input type date pour les dates, la gestion de l'envoi avec un bouton dédié et la lecture de $_POST pour parcourir les tableaux et traiter chaque ligne. En pratique, il est courant de vérifier l'existence des tableaux et d'itérer sur leur taille pour assembler les données à traiter dans la base.

Bobot (l’IA à votre service)
  1. slefevre77 Auteur
    Nickel, je vais m'amuser pour la suite.

    Bonne soirée !!!

    et un GRAND merci !
    1. jordane45 Modérateur
      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.
  2. slefevre77 Auteur
    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
    1. slefevre77 Auteur
      J'abuse !!!
    2. jordane45 Modérateur
      J'ai édité ton message pour y mettre la correction
      Il manque un ? 
      $prenom = !empty($_POST['prenom']) 
      ?  $_POST['prenom'] : null;
  4. slefevre77 Auteur
    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
    1. jordane45 Modérateur
      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>";

}
    2. slefevre77 Auteur
      @jordane45Oui, 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.
    3. jordane45 Modérateur
      @slefevre77Dé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;
		}
  6. slefevre77 Auteur
    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!
    1. slefevre77 Auteur
      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
      2. slefevre77 Auteur
        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.
        1. jordane45 Modérateur
          Tu as deux erreurs dans le js lignes 43 et 92 à corriger
      3. slefevre77 Auteur
        Mais aucune erreur quand je clique sur "Ajouter une ligne".
        1. slefevre77 Auteur
          En changeant de navigateur, j'ai trouvé ceci à l'ouverture du formulaire :

          1. jordane45 Modérateur
            Ca on s'en fou in peu :-)
            C'est l'onglet console (JavaScript) qui m'intéresse pour l'instant
        2. slefevre77 Auteur
          J'ai trouvé, mais cela n'indique pas d'erreur :

          https://xxx/javascript.js
          État
          200
          OK
          VersionHTTP/2
          Transfert1,13 Ko (taille 2,36 Ko)
          Politique de référentstrict-origin-when-cross-origin

          accept-ranges
          bytes
          content-encoding
          gzip
          content-length
          860
          content-type
          application/javascript
          date
          Sun, 12 Dec 2021 20:20:35 GMT
          etag
          "96e-5d2f87dbd02fe-gzip"
          last-modified
          Sun, 12 Dec 2021 20:06:26 GMT
          server
          nginx
          vary
          Accept-Encoding
          X-Firefox-Spdy
          h2

          Accept
          • /*

          Accept-Encoding
          gzip, deflate, br
          Accept-Language
          fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
          Cache-Control
          max-age=0
          Connection
          keep-alive
          Cookie
          PHPSESSID=14501fe26e6fbb6ba74eb2f5795ed91a
          Host
          bluray4.domunix.fr
          If-Modified-Since
          Sun, 12 Dec 2021 20:06:26 GMT
          If-None-Match
          "96e-5d2f87dbd02fe-gzip"
          Referer
          https://xxxx/formulaire.php
          Sec-Fetch-Dest
          script
          Sec-Fetch-Mode
          no-cors
          Sec-Fetch-Site
          same-origin
          TE
          trailers
          User-Agent
          Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0
          1. jordane45 Modérateur
            Même après que tu aies. Cliqué sur le bouton ?

            Tu peux nous faire une capture écran pour le coup ça sera plus lisible
        3. slefevre77 Auteur
          Donc avec le javascript, cela fonctionne toujours, le formulaire est bien envoyé, mais le bouton "Ajouter une ligne" ne fonctionne pas.

          Code PHP généré avant envoi : 

          <!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="ajout_formulaire.php" method="post">   
      <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>
        <tbody>
          <tr>
            <td>
              <input type="text" name="prenom[]">
            </td>
            <td>
              <input type="text" name="nom[]">
            </td>
            <td>
              <input type="date" name="datenaissance[]">
            </td>
            <td>
              <input type="text" name="url[]">
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">
              <button type="button" id="ajouter_ligne">Ajouter une ligne</button>
            </td>
          </tr>
        </tfoot>
      </table>
      <button type="submit" name="send_data" class="important">Envoyer les données</button>
     </form>
	 <script src="javascript.js"></script>
  </body>
</html>


          Valeurs contenues dans POST
          array(5) { ["prenom"]=> array(1) { [0]=> string(10) "Sébastien" } ["nom"]=> array(1) { [0]=> string(7) "TEST" } ["datenaissance"]=> array(1) { [0]=> string(10) "2021-12-24" } ["url"]=> array(1) { [0]=> string(13) "sebastien.jpg" } ["send_data"]=> string(0) "" }
          1. jordane45 Modérateur
            Pour ton souci de bouton pour ajouter une ligne,
            Commence par regarder dans la console javascript de ton navigateur si il n'y aurait pas une erreur ou des messages pouvant expliquer la cause du souci
        4. slefevre77 Auteur
          Désolé pour ma réponse tardive,

          C'est toujours OK, sans le javascript, je teste avec maintenant.
          1. jordane45 Modérateur
            Maintenant, A la place du code de ton formulaire actuel, pourrais tu juste mettre ceci : 
            <!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="ajout_formulaire.php" method="post">   
      <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>
        <tbody>
          <tr>
            <td>
              <input type="text" name="prenom[]">
            </td>
            <td>
              <input type="text" name="nom[]">
            </td>
            <td>
              <input type="date" name="datenaissance[]">
            </td>
            <td>
              <input type="text" name="url[]">
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">
              <button type="button" id="ajouter_ligne">Ajouter une ligne</button>
            </td>
          </tr>
        </tfoot>
      </table>
      <button type="submit" name="send_data" class="important">Envoyer les données</button>
     </form>
  </body>
</html>


            Tu remplis les input, tu cliques sur le bouton et tu regardes si tu as toujours tes variables POST

            Si ça fonctionne ,
            Ajoute ton script js avant le </body> 
            <script src="javascript.js"></script>

            puis tu testes à nouveau.

            Et si ça aussi c'est ok ...
            Tu cliques sur ajouter une nouvelle ligne ... tu remplis tous les input et tu regardes si ça marche.
            Si ça ne marche pas, dans ton navigateur, tu fais un clic droit ta page, dans le menu tu prends inspecter ( ou examiner selon le navigateur)
            et dans la barre de debug de ton navigateur tu cherches la ligne de code qui correspond à ton tableau. une fois trouvé, tu fais un clic droit et tu devrais avoir dans le menu un truc du genre editer html...
            Tu le fais puis tu copies/colles le résultat ici.

            1. slefevre77 Auteur
              Bonjour,

              Merci pour ta patience et ton aide précieuse, j'ai fait ce que tu m'as demandé, cela fonctionne bien :

              Valeurs contenues dans POST
              array(5) { ["prenom"]=> array(1) { [0]=> string(10) "Sébastien" } ["nom"]=> array(1) { [0]=> string(7) "DUPONT" } ["datenaissance"]=> array(1) { [0]=> string(10) "2021-12-08" } ["url"]=> array(1) { [0]=> string(13) "sebastien.jpg" } ["send_data"]=> string(0) "" }
              1. jordane45 Modérateur
                A la place du code de ton formulaire actuel, pourrais tu juste mettre ceci : 
                <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>My VidéoThèque</title>
	</head>
	<body>
	    <form id="form_acteurs" action="ajout_formulaire.php" method="post">

      <input type="text" name="prenom[]">
      <input type="text" name="nom[]">
      <input type="date" name="datenaissance[]">
      <input type="text" name="url[]">
      <button type="submit" name="send_data" class="important">Envoyer les données</button>
    </form>

  </body>
</html>


                Et dans le fichier ajout_formulaire.php 
                <?php

  echo "Valeurs contenues dans POST <br>";
  var_dump($_POST);

?>


                Tu renseignes des valeurs dans les input .. puis tu clique sur le bouton pour envoyer les données

                1. slefevre77 Auteur
                  Pour le bouton "Valider" qui était inactif, j'ai modifier comme ceci : 

                  <button type="button" id="valider">Valider</button>


                  J'ai donc supprimé : disabled="disabled"

                  Et c'est bon, mais pas pour la récupération des infos.
                  1. slefevre77 Auteur
                    Merci pour ta réponse, je viens de tester et cela ne change rien, aucune variable ni avant ni après l'envoi.
                    Et le formulaire ne réagis plus pareil, il y a déjà une première ligne avant de cliquer sur "Ajouter une ligne", ce qui est plutôt bien, mais il est impossible de valider avant d'ajouter une ligne puis de la supprimer si elle est vide.

                    code PHP généré avant envoi : 

                    <!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="/ajout_formulaire.php" method="post">
			<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>
				<tbody>
          <tr>
            <td><input name="prenom[]"></td>
            <td><input name="nom[]"></td>
            <td><input name="date_de_naissance[]"></td>
            <td><input name="url_photo[]"></td>
            <td></td>
          </tr>
				</tbody>
        <tfoot>
          <tr>
            <td colspan="4"><button type="button" id="ajouter_ligne">Ajouter une ligne</button></td>
          </tr>
        </tfoot>
			</table>
			<p class="submit">
				<button type="button" id="modifier" disabled="disabled">Modifier</button>
				<button type="button" id="valider" disabled="disabled">Valider</button>
			<br/><br/>
				<button type="submit" id="send_data" class="important">Envoyer les données</button>
			</p>
			</form>
		</div>
		<script src="javascript.js"></script>
	</body>
</html>
                    1. jordane45 Modérateur
                      Déjà, il faut replacer le <tfoot> après le body.

                      Ensuite, pourrais tu tester juste ce code ( sans essayer d'ajouter de nouvelle ligne par ton bouton) et voir (après avoir rempli les input) si tu as quelques chose dans la variable $_POST 
                      <!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="/ajout_formulaire.php" method="post">
			<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>
				<tbody>
          <tr>
            <td><input name="prenom[]"></td>
            <td><input name="nom[]"></td>
            <td><input name="date_de_naissance[]"></td>
            <td><input name="url_photo[]"></td>
            <td></td>
          </tr>
				</tbody>
        <tfoot>
          <tr>
            <td colspan="4"><button type="button" id="ajouter_ligne">Ajouter une ligne</button></td>
          </tr>
        </tfoot>
			</table>
			<p class="submit">
				<button type="button" id="modifier" disabled="disabled">Modifier</button>
				<button type="button" id="valider" disabled="disabled">Valider</button>
			<br/><br/>
				<button type="submit" id="send_data" class="important">Envoyer les données</button>
			</p>
			</form>
		</div>
		<script src="javascript_5.js"></script>
	</body>
</html>

                      1. slefevre77 Auteur
                        Je pense qu'il manque quelque chose pour récolter et envoyer les données.

                        Quelqu'un aurait une idée ?
                        • 1
                        • 2

                        Discussions similaires

                        java script error in the main process
                        ceciel2307

                        3 réponses
                        Problème de restrictions
                        SuperAmbi

                        5 réponses
                        smarphone écran cassė (noir): comment récupérer ses données?
                        camsin

                        7 réponses