Tableau éditable avec ajout à la base de données

Version imprimable

Bonjour,

J'ai une problématique qui est la suivante: je veux avoir un tableau des champ et lorsqu'on s'appuie sur un bouton en ajoute une ligne autre ligne vide semblable à la ligne précédente et puis avoir un bouton submit qui fait l'insertion des tous les données saisies dans la base de données. C'est pour mon application web dynamique svp aidez moi

Voici le code du mon tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="dTable" id="matable"> 
 <thead> <tr> <th> <div align="center"> Code Article </div> </th> 
              <th> <div align="center"> Article </div> </th> 
			  <th> <div align="center"> D&eacutesignation </div> </th> 
			  <th> <div align="center"> Num&eacutero de S&eacuterie </div> </th> 
			  <th> <div align="center"> Version </div> </th>
              <th> <div align="center"> Famille </div> </th> 
              <th> <div align="center"> Emplacement </div> </th> 
 
 </tr> </thead> 
<tfoot>  </tfoot> 
<tbody> <tr> <td> <div align="center"> <input type="text" name="Code_Article"/> </div> </td> 
             <td> <div align="center"> <input type="text" name="Article"/> </div> </td> 
             <td> <div align="center"> <input type="text" name="Designation"/> </div> </td> 
			 <td> <div align="center"> <input type="text" name="Numero_Serie"/> </div> </td> 
			 <td> <div align="center"> <input type="text" name="Version"/> </div> </td> 
			 <td> <div align="center"> <select name="Famille"><option></option>
			 <option></option>
			 <OPTION></OPTION>  </select> </div> </td>
			 <td> <div align="center"> <input type="text" name="Emplacement"/> </div> </td> 
 
</tr> </tbody> </table>

et voici le code pour ajout des champs à ma base des données

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 <?php 
session_start(); 
 
// On intègre les informations de connexion à la base de données ainsi que le fichier 
 
include("conf_site.php");
include("fonctions.php");
// On intialise la connexion à la base de données
$bdd = new PDO('mysql:host='.$bdd_hote.';dbname='.$bdd_nmDB, $bdd_user, $bdd_pass);
$Numero_Bon_Entree=$_SESSION['Bon_Entree_N'];
$Numero_Serie=htmlentities(trim($_POST['Numero_Serie']));
$Code_Article=htmlentities (trim($_POST['Code_Article']));
$Carte=htmlentities(trim($_POST['Article']));
$Famille=htmlentities(trim($_POST['Famille']));
$Emplacement=htmlentities(trim($_POST['Emplacement']));
$Version=htmlentities(trim($_POST['Version']));
$Designation=htmlentities(trim($_POST['designation']));
if($Code_Article&&$Numero_Serie){
$requete="INSERT INTO `articles` (`Numero_Serie`, `Code_Article`,`Carte`,`Famille`,`Emplacement`, `Version`, `Designation`,`Numero_Bon_Entree`) VALUES ('$Numero_Serie','$Code_Article', '$Carte','$Famille','$Emplacement','$Version','$Designation','$Numero_Bon_Entree' );";
sql($requete);
 session_start();
$_SESSION['ok2']="ok";
header('location:bon_d\'entree2.php');
}
else { header ('location:bon_d\'entree2_erreur.php'); }
?>

Merci de votre aide.

Utilise la possibilité du html d'utiliser les tableaux dans les names de tes input pour rassembler les éléments qui correspondent au même article.
Code:

1 2 3 4 <input type="text" name="article[0][Code_Article]"/> <input type="text" name="article[0][Article]"/> <input type="text" name="article[][Designation]"/> // etc...
Tu peux créer de nouveaux articles en javascript (ou mieux utilise jquery ce sera plus simple) :
Code:

1 2 3 4 5 6 7 8 9 10 11 // En ayant créé un bouton avec l'id "ajouterArticle" dans ton html var nbArticle = 0; $('#ajouterArticle').click(function() { nbArticle++; $('<input type="text" name="article[' + nbArticle + '][Code_Article]"/>' + '<input type="text" name="article[' + nbArticle + '][Article]"/>' + '<input type="text" name="article[' + nbArticle + '][Designation]"/>' // etc... ).prependTo($(this)); });
Dans ton php, tu n'as plus qu'à boucler sur la requête qui sauvegarde les données, pour enregistrer chaque article qui aura été envoyé dans ton formulaire.

Merci pour votre aide spartacusply, j'ai fait comme tu as dit mais il y a encore le problème le bouton ne fonctionne pas.
Svp est ce que vous pouvez vérifier mon code:

Code:

1
2
3
4
5
6
7
8
9
<tbody> <tr> <td> <div align="center"> <input type="text" name="article[0][Code_Article]"/> </div> </td> 
             <td> <div align="center"> <input type="text" name="article[0][Article]"/> </div> </td> 
             <td> <div align="center"> <input type="text" name="article[0][Designation]"/> </div> </td> 
			 <td> <div align="center"> <input type="text" name="article[0][Numero_Serie]"/> </div> </td> 
			 <td> <div align="center"> <input type="text" name="article[0][Version]"/> </div> </td> 
			 <td> <div align="center"> <select name="article[0][Famille]"><OPTION></OPTION>  </select> </div> </td>
			 <td> <div align="center"> <input type="text" name="article[0][Emplacement]"/> </div> </td> 
			 <td>  <input type="button" id="ajouterArticle" value="add"/> </td >
</tr> </tbody>

et j'ai tapé ce code pour la fonction javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var nbArticle = 0;
 
    $('#ajouterArticle').click(function() {
        nbArticle++;
        $('<input type="text" name="article[' + nbArticle + '][Code_Article]"/>' +
                '<input type="text" name="article[' + nbArticle + '][Article]"/>' +
                '<input type="text" name="article[' + nbArticle + '][Designation]"/>'+
                '<input type="text" name="article[' + nbArticle + '][Numero_Serie]"/>'+
				' <input type="text" name="article[' + nbArticle + '][Version]"/>' +
				'<select name="article[' + nbArticle + '][Famille]"><OPTION></OPTION>  </select>'+
				'<input type="text" name="article[' + nbArticle + '][Emplacement]"/>'
 
 
                ).prependTo($(this));
    });

Je m'excuse si mon code contient des erreurs mais c'est parce que je suis débutante dans le javascript
Merci d'avance

28/04/2014, 17h36
Spartacusply

As-tu bien importé la librairie jquery ? (http://jquery.com/download/#using-jquery-with-a-cdn)

Pour information, pour débugguer du javascript, c'est la touche F12 sous chrome, extension firebug sous firefox.
28/04/2014, 17h58
W.ided123

Désolé encore une fois comme je t'ai dit je suis encore débutante en développement web, je n'a pas compris ce qu'il me faut faire
28/04/2014, 18h01
Spartacusply

Je t'ai mis le lien direct pour savoir comment importer la librairie javascript :

Code:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
28/04/2014, 18h05
W.ided123

J'ai essayé ça mais le problème reste encore, le bouton ne fonctionne pas

J'ai oublié les balise englobantes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
var nbArticle = 0;
 
    $('#ajouterArticle').click(function() {
        nbArticle++;
        $('<input type="text" name="article[' + nbArticle + '][Code_Article]"/>' +
                '<input type="text" name="article[' + nbArticle + '][Article]"/>' +
                '<input type="text" name="article[' + nbArticle + '][Designation]"/>'+
                '<input type="text" name="article[' + nbArticle + '][Numero_Serie]"/>'+
				' <input type="text" name="article[' + nbArticle + '][Version]"/>' +
				'<select name="article[' + nbArticle + '][Famille]"><OPTION></OPTION>  </select>'+
				'<input type="text" name="article[' + nbArticle + '][Emplacement]"/>'
 
 
                ).prependTo($(this));
    });
});

Sers toi de la console pour voir ce genre d'erreur.

28/04/2014, 18h21
W.ided123

Dsl, mais le problème reste toujours, ça peut qu'il soit lors de l'appel de la fonction , ou peut être qu'il n'a pas reconnu le bouton malgré c'est pour le même id
28/04/2014, 18h32
Spartacusply

Erreur de ma part, remplace "prependTo" par "insertBefore" (subtilité entre les deux qui change tout).
29/04/2014, 10h48
W.ided123

Merci infiniment, c'était très utile et l'ajout du tableau fonctionne bien, mais svp est-ce qu'il est possible que vous m'aidez pour le code php de l'ajout à la base des données.
30/04/2014, 09h15
Spartacusply

Fais déjà un print_r($_POST);, tu pourras visualiser comment est construit ton tableau $_POST.

Il te faut boucler sur le tableau et faire une insertion par tour de boucle.

j'ai essayé avec ce code mais une erreur s'affiche: Column count doesn't match value count at row 1
Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php 
session_start(); 
// On intègre les informations de connexion à la base de données ainsi que le fichier 
include("conf_site.php");
include("fonctions.php");
// On intialise la connexion à la base de données
$bdd = new PDO('mysql:host='.$bdd_hote.';dbname='.$bdd_nmDB, $bdd_user, $bdd_pass);
$Numero_Bon_Entree=$_SESSION['Bon_Entree_N'];
$value=''; 
$i=0; 
while(isset($_POST['article'][++$i]['Numero_Serie']))
{ $value.="('', 
'".mysql_real_escape_string($_POST['article'][$i]['Numero_Serie'])."','".mysql_real_escape_string($_POST['article'][$i]['Code_Article'])."','".mysql_real_escape_string($_POST['article'][$i]['Article'])."','".mysql_real_escape_string($_POST['article'][$i]['Famille'])."','".mysql_real_escape_string($_POST['article'][$i]['Version'])."','".mysql_real_escape_string($_POST['article'][$i]['Emplacement'])."','".mysql_real_escape_string($_POST['article'][$i]['Designation'])."','".$Numero_Bon_Entree."')";}
$value=substr($value,0,-1); 
mysql_query("INSERT INTO `article` (`Numero_Serie`, `Code_Article`,`Carte`,`Famille`,`Version`, `Emplacement`, `Designation`,`Numero_Bon_Entree`) VALUES ('".$value."')") or die (mysql_error());
?>