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

Résolu
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. Modérateur
    Bonjour

    Envoie ton form en POST
    <form id="form_acteurs" action="/recup_donnees.php" method="post">


    Et pour récupérer les données.. regarde ce que contient la variable $_POST
    1. Bonjour,

      Merci pour ta réponse, j'ai raouté : method="post", mais il ne se passe rien quand j'appuie sur le bouton "Envoyer les données".
      C'est la fonction qui ne fonctionne pas, je ne sais pas la créer correctement.
      1. Modérateur
        Faut enlever
        form.onsubmit = function (){return false;}
    2. Merci, un grand pas en avant pour moi. Le formulaire est bien envoyé.

      Par contre comment je récupère les données ?
      Je ne comprends pas le nom de la variable ? de l'Array ?

      print_r (quel est le nom de la variable ?);
      1. Modérateur
        Je t'ai dit ...regarde ce que contient la variable $_POST

        vu que tu as des inputs dont le NAME est : "name[]"
        tu vas avoir, dans $_POST une variable "name" qui sera elle même un array contenant chaque valeur de cet input ..

        NB: Si tu ne sais pas ce qu'est un array associatif / indexé ..ni comment manipuler ce type d'array en php, commence par te former la dessus..avant de poursuivre l'écriture de ton code
    3. print_r ($_POST);

      Ça affiche :

      Array ( )

      Et je viens de voir que c'est le bouton valider qui envoie le formulaire, mais le bouton "Envoyer les données ne fonctionne pas"!
      1. Modérateur
        Si on reprend ton code
         <input type="button" onclick="send_data()" value="Envoyer les données">
        

        Le bouton fait appel à une fonction send_data()

        Fonction qui ne semble pas exister dans ton code js ..

        Et d'un autre côté tu as le bouton
        <button type="submit" id="valider" class="important">Valider</button>
        

        qui lui, fait un SUBMIT de ton formulaire.. et donc qui doit bien envoyer les données de ton formulaire ..

        1. Avec ton remarques, j'ai modifié le formulaire comme suit :

           <p class="submit">
            <button type="button" id="modifier" disabled="disabled">Modifier</button>
            <button type="button" id="valider" class="important">Valider</button>
            <br/><br/>
            <button type="submit" id="send_data" class="important">Envoyer les données</button>
           </p>
          </form>

          </code>

          Et le fichier javascript.ps comme suit :

          (function (){
           var champs = [
            "prenom",
            "nom",
            "date_de_naissance",
            "url_photo"
           ],
          
           modifier = document.getElementById("modifier"),
           valider = document.getElementById("valider"),
           send_data = document.getElementById("send_data"),
           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_send_data(){
            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;
           send_data.onclick = action_send_data;
           
           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;
           };
          })();
          


          Maintenant tous les boutons sont opérationnels, mais je ne récupère toujours aucune donnée dans $_POST.

          Array ( )
          1. Modérateur
            Déjà,
            merci de bien vouloir indiquer le langage dans les balises de code afin que l'on ai la coloration syntaxique
            Explications ( à lire entièrement) disponibles ici :https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

            Ensuite, il faudrait nous montrer
            1 - Le code source de la page générée ( tu affiches la page dans ton navigateur, puis tu affiches son code source via la raccourci CTRL + u et tu le copie/colle ici )

            2 - Le code PHP que tu as écrit exactement..
            1. Désolé pour les balises de code, je reprends :

              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="/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>
              					
              				<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="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>
              


              javascript.js :

              (function (){
              	var champs = [
              		"prenom",
              		"nom",
              		"date_de_naissance",
              		"url_photo"
              	],
              
              	modifier = document.getElementById("modifier"),
              	valider = document.getElementById("valider"),
              	send_data = document.getElementById("send_data"),
              	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;
              	}
              	
              	// Ce que j'ai rajouté ici mais qui ne fonctionne pas et ne sert donc à rien
              	function action_send_data(){
              		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;
              	send_data.onclick = action_send_data;
              	
              	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;
              	};
              })();
              


              ajout_formulaire.php :

              <!DOCTYPE html>
              <html>
              	<head>
              		<meta charset=UTF-8" />
              		<title>My VidéoThèque</title>
              	</head>
              
              	<body>
              		<div align="center"><h1>Récupération des données et ajout à la base de données</h1></div>
              
              		<?php
              			print_r ($_POST);
              		?>
              	</body>
              </html>
              


              Code PHP généré en ayant renseigné la première ligne :

              <!DOCTYPE html>
              <html>
              	<head>
              		<meta charset=UTF-8" />
              		<title>My VidéoThèque</title>
              	</head>
              
              	<body>
              		<div align="center"><h1>Récupération des données et ajout à la base de données</h1></div>
              
              		Array
              (
              )
              	</body>
              </html>
              


              Rien n'est envoyé.
              1. Modérateur
                C'est le code généré de la page formulaire.php ( après que tu aies ajoutés des input dedans ) qu'il nous faut
            2. Voici le code de formulaire, en ayant renseigné des inputs, avant d'appuyer sur le bouton "Envoyer les données" :

              <!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>
              					
              				<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="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>
              


              On n'y voit pas les infos renseignées !
              1. Je pense qu'il manque quelque chose pour récolter et envoyer les données.

                Quelqu'un aurait une idée ?
                1. 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. 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. 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. 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. 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. 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. Désolé pour ma réponse tardive,

                              C'est toujours OK, sans le javascript, je teste avec maintenant.
                              1. 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. 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
                              2. 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. 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. En changeant de navigateur, j'ai trouvé ceci à l'ouverture du formulaire :

                                1. Modérateur
                                  Ca on s'en fou in peu :-)
                                  C'est l'onglet console (JavaScript) qui m'intéresse pour l'instant
                              • 1
                              • 2