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

Résolu/Fermé
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022 - Modifié le 11 déc. 2021 à 10:21
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 - 13 déc. 2021 à 19:31
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

jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 09:33
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
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 09:49
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.
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 09:51
Faut enlever
form.onsubmit = function (){return false;}
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 10:00
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 ?);
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 10:05
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
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 10:11
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"!
0

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

Posez votre question
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 10:24
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 ..



0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
Modifié le 11 déc. 2021 à 12:06
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 ( )
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 12:03
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..
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 12:25
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é.
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 12:29
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
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
Modifié le 11 déc. 2021 à 12:36
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 !
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 18:09
Je pense qu'il manque quelque chose pour récolter et envoyer les données.

Quelqu'un aurait une idée ?
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 18:23
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>

0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 19:08
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>
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
11 déc. 2021 à 19:13
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.
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
11 déc. 2021 à 20:02
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

0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
12 déc. 2021 à 08:44
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) "" }
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
12 déc. 2021 à 10:40
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.

0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
12 déc. 2021 à 21:01
Désolé pour ma réponse tardive,

C'est toujours OK, sans le javascript, je teste avec maintenant.
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
12 déc. 2021 à 21:05
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) "" }
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
12 déc. 2021 à 21:15
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
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
12 déc. 2021 à 21:22
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
0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
12 déc. 2021 à 21:41
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
0
slefevre77 Messages postés 33 Date d'inscription samedi 11 décembre 2021 Statut Membre Dernière intervention 14 janvier 2022
12 déc. 2021 à 22:09
En changeant de navigateur, j'ai trouvé ceci à l'ouverture du formulaire :

0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
12 déc. 2021 à 22:51
Ca on s'en fou in peu :-)
C'est l'onglet console (JavaScript) qui m'intéresse pour l'instant
0