Discussion :

[maristar]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function clone(line) {
	newLine = line.cloneNode(true);
	line.parentNode.appendChild(newLine);
}

avez vous une solution svp ??

[Invité]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)
});

[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

[Invité]

C'est surtout à toi de nous expliquer ce que tu entends par "récupérer".

[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

[Invité]

Dans ce cas, c'est en PHP.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$diplome_array = $_POST['diplome']; // array
...

Fais un simple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

var_dump( $_POST );

Tu verras.

[maristar]

voici mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

[Invité]

Il faut utiliser foreach pour lire chaque ligne du tableau :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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,
    ));
  }
}

[maristar]

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