Récupérer les inputs clonés avec la fonction clone()

Version imprimable

Bonjour,
j'ai utilisé la fonction clone() afin d'ajouter des ligne en fonction de mon besoin, mais j'arrive pas à récupérer les lignes (id) clonées (ajouter dans mon tableau) dans la la page choix.php:
Code:

1 2 3 4 5 6 7 8 9 10 <form action="choix.php" method="post" > <table> <tr> <td><input type="text" name="diplome" id="diplome" size="40" /></td> <td><input type="text" name="specialite" id="specialite" size="40"/></td> <td><input type="date" name="Date_dip" id="Date_dip" size="10"/></td> <td><input type="button" onclick="clone(this.parentNode.parentNode) "/></td> </tr> </table> </form>
et voici ma fonction clone():
Code:

1 2 3 4 function clone(line) { newLine = line.cloneNode(true); line.parentNode.appendChild(newLine); }
avez vous une solution svp ??

Bonjour,

1- <... id="diplome" ...> : un id DOIT être UNIQUE.
Donc, on ne peut pas le cloner.
Si on clone, il faut utiliser une classe.

2- <... name="diplome" ...> :
Si on clone, on va alors en récupérer plusieurs. Il faut donc écrire : <... name="diplome[]" ...>.

3- On a alors :
Code:

1 2 3 4 5 6 7 8 9 10 <form id="myform" action="choix.php" method="post" > <table> <tr> <td><input type="text" name="diplome[]" class="diplome" size="40" /></td> <td><input type="text" name="specialite[]" class="specialite" size="40"/></td> <td><input type="date" name="Date_dip[]" class="Date_dip" size="10"/></td> <td><input type="button" onclick="clone(this.parentNode.parentNode) "/></td> </tr> </table> </form>
4- Pour récupérer les éléments, il faut passer par une astuce : mettre l'"écouteur" sur un élément DEJA présent dans le DOM (le <form>, par exemple).
Code:

1 2 3 4 5 6 const myform = document.querySelector('#myform'); myform.addEventListener('keyup', function(e){ let elt = e.target; console.log( elt.name + ' : ' + elt.value) });

27/02/2019, 14h01
maristar

merci pour votre aide je vous ai bien compris sauf l'étape 4 j'ai pas trop compris ce que je dois faire? la récupération des valeurs clonées
27/02/2019, 14h13
Invité

C'est surtout à toi de nous expliquer ce que tu entends par "récupérer".
27/02/2019, 14h32
maristar

dans la page choix.php je veux insérer les élément venant du <form> avec le POST dans ma base de données
27/02/2019, 14h39
Invité
Dans ce cas, c'est en PHP.
Code:

1 2 $diplome_array = $_POST['diplome']; // array ...
Fais un simple :

Code:

var_dump( $_POST );

Tu verras.

1 pièce(s) jointe(s)

voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
<form id="myform" action="choix.php" method="post" >
  <table>
    <tr>
     <td><input type="text" name="diplome[]"  class="diplome" size="40"  /></td>
     <td><input type="text" name="specialite[]"  class="specialite" size="40"/></td>
     <td><input type="date" name="Date_dip[]" class="Date_dip" size="10"/></td>
     <td><input type="button" onclick="clone(this.parentNode.parentNode) "/></td>
    </tr>
  </table>
</form>

choix.php:

Code:

1
2
3
4
5
6
  $diplome=$_POST['diplome'];
  $specialite= $_POST['specialite'];
  $Date_dip= $_POST['Date_dip'];
  $req=$bdd->query('SET NAMES `utf8`');
  $req = $bdd->prepare("INSERT INTO emp_diplome(employe,diplome,specialite, Date_dip)VALUES ('$id','$diplome','$specialite','$Date_dip')");
  $req->execute(array());

fichier js:

Code:

1
2
3
4
5
6
7
8
9
10
function clone(line) {
	newLine = line.cloneNode(true);
	line.parentNode.appendChild(newLine);
}
const myform = document.querySelector('#myform');
 
myform.addEventListener('keyup', function(e){
  let elt = e.target;
  console.log(elt.name + ' : ' + elt.value)
});

et voila ce que ma donné
Pièce jointe 453599

Il faut utiliser foreach pour lire chaque ligne du tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  // préparation de la requête
  $req = $bdd->prepare("INSERT INTO emp_diplome (employe,diplome,specialite, Date_dip) VALUES (:id,:diplome,:specialite,:Date_dip)");
  $req=$bdd->query('SET NAMES `utf8`');
 
$id = $_POST['id']; // id employe
 
foreach( $_POST['diplome'] as $ligne => $diplome )
{
  $diplome = $_POST['diplome'][$ligne];
  $specialite = $_POST['specialite'][$ligne];
  $Date_dip = $_POST['Date_dip'][$ligne];
 
  if( !empty( $diplome ) || !empty( $specialite ) ) // condition à adapter
  {
    // exécution de la requête
    $req->execute(array(
      ':id' => $id,
      ':diplome' => $diplome,
      ':specialite' => $specialite,
      ':Date_dip' => $iDate_dip,
    ));
  }
}

28/02/2019, 09h15
maristar

Bonjour,
Grand merciiiiiiiiiiiiiiiiii pour votre aide :lol::):):):) ca marche
bonne journée