Insertion données tableau html dans la bdd avec PDO [Fermé]

Signaler
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
 -
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
 -
Bonjour la grande famille!
Svp!!! je ne demande que votre aide je suis vraiment coincé à un problème avec javascript et php j'ai un script javascript qui me permet d'ajouter des lignes dans mon tableau html par rapport à la saisie des utilisateurs et j'aimerais ensuite envoyer toutes les données de ce tableau dans ma bdd en un coup je suis vraiment coincé aidez moi svp!!!
voici mon code qui me permet de remplir mon tableau html 

function addRow() {
"use strict";
var tableBody = document.getElementById("table-body");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");    
var td4 = document.createElement("td");    
var row = document.createElement("tr");

td1.innerHTML = document.getElementById("getProducts").value;
td2.innerHTML  = document.getElementById("price").value;
td3.innerHTML  = document.getElementById("qtecom").value;
td4.innerHTML  = document.getElementById("price").value * document.getElementById("qtecom").value;

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);

tableBody.appendChild(row);
}

Mon tableau html est là: 

<table id="table">
     <thead id="table-head">
     <tr>
      <th>Articles</th>
      <th>PU</th>
      <th>Quantity</th>
      <th>Total (FC)</th>
     </tr>
     </thead>
     <tbody id="table-body">
     </tbody>
     </table>

Si quelqu'un peut m'aider comment je peut faire pour l’insérer dans ma bdd svp!!!!
Je compte sur vous la grande famille car j'ai beau chercher mais pas de solution jusque là...

10 réponses

Réponse 1 / 10
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
 186
Ok

C'est pas mal du tout !!!

Il faut que tu soumettes les nouvelles données à ce bout de code PHP. De manière asynchrone, on utilisera Ajax. Tu utilises la librairie jQuery ?

Le premier champ de table facture tu l'initialises à null ? C'est pas une clé primaire par hasard ? Tu as vérifié si ta requête SQL fonctionne bien avant et t'insères une ligne ?

La page où il y a ton PHP c'est situé sur la même page que le formulaire ou sur une autre ? Il est de bonne pratique d'envoyer les données par POST ou GET plutôt que d'aller chercher les valeurs dans le DOM avec Javascript et se mélanger les pinceaux entre PHP, HTML et JavaScript :

$insert->execute(array(
'designation' => $_POST['designation'],
'Qte' => $_POST['quantite'],
'pu' => $_POST['price'],
'tot' => $_POST['designation'],
));

PS: c'est ma signature
3
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 10
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
 186
J'ai bien compris oui. Si utilises jQuery (ce que je ferais) faut que tu utilises la fonction $.ajax()

tu y spécifies l'URL, les données, le mode d'envoi (GET/POST/PUT/DELETE), la fonction a exécuter en cas de succès/erreur
https://api.jquery.com/jQuery.ajax/

sinon faut que tu créées un objet de type XMLHttpRequest que j'ai jamais fait. Mais c'est un sujet très riche en documentation, tu trouveras très facilement des exemples type sur Internet
Signaler
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
c'est chaud!
Signaler
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
 186
dis-toi que tu as déjà fais le code qui insère la ligne dans ton tableau html et le code PHP qui insère dans la BDD

il faut juste maintenant que tu envoies les données au code PHP pour que cela s'insère
Réponse 3 / 10
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
 186
slt,

il est où ton code PHP ?
Réponse 4 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
Bon tel que tu l'as dis qui ne tente rien n'a rien j'ai essayé de faire sa : 
	<?php
		include_once('connect.php');
		if (isset($_POST['Enregistrer'])){ // execution apres envoi du formulaire
		// obetention des inputs de l'utilisateur	

		$insert = $bdd->prepare('
						  INSERT INTO facture VALUES(null, :designation, :Qte, :pu, :tot)
						  ');
						  $insert->execute(array(
							'designation' => "echo <script> document.getElementById(getProducts).value </script>",
							'Qte' => "echo <script> document.getElementById(price).value </script>",
							'pu' => "echo <script> document.getElementById(qtecom).value </script>",
							'tot' => "echo <script> document.getElementById(getProducts).value </script>",
							));	
			if ($insert){
			$_GET['message']="succes";
			}else{
			$_GET['erreur']="login";	
			}	

		}
    ?>

mais je suis perdu franchement de l'aide je ne maitrise vraiment pas du javascript help!!!!
Réponse 5 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
Oui le premier champ de ma table c'est une clé auto_increment et aussi ma page PHP est situé sur la même page
Signaler
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
 186
dans ce cas n'initialise pas le premier champ à NULL. ta requête SQL ne peut pas marcher

INSERT INTO facture (nom_column2, nom_column3, nom_column4...) VALUES (valeur_column2, valeur_column3, valeur_column4...);
Réponse 6 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
Soit s'il y a un lien qui explique comment ajouter des lignes dans une table html avec un autre code javascript et enfin l'envoyer dans ma base si possible tu me donnes stp!!! soit un code un peu plus explicite parce que là je suis perdu
Réponse 7 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
mon problème est que je voudrais à l'aide d'un code javascript ajouter des lignes à l'aide d'un input et à la fin enregistrer toutes ces données dans une base de données
Réponse 8 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
Bonjour mon frère @totodunet: regarde ce que jai fait jusque qui marche un peu bien mon code javascript est là qui m'ajoute de données des valeurs des input: 

function addRow() {
"use strict";
 
var tableBody = document.getElementById("table-body");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");   
var td4 = document.createElement("td");   
var td5 = document.createElement("td");   
var td6 = document.createElement("td");   
var td7 = document.createElement("td");   
var row = document.createElement("tr");
 
td1.innerHTML = document.getElementById("ID").value;
td2.innerHTML  = document.getElementById("NAME").value;
td3.innerHTML  = document.getElementById("PASSWORD").value;
td4.innerHTML  = document.getElementById("CREDITS").value;
td5.innerHTML  = document.getElementById("EMAIL_ID").value;
td6.innerHTML  = document.getElementById("CREATED_ON").value;
td7.innerHTML  = document.getElementById("MODIFIED_ON").value;
 
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
 
tableBody.appendChild(row);
 
}

et mon tableau qui recoit les données ressemble à celui ci: 

<table id="table" border="1">
<thead id="table-head">
<tr>
    <th>Item</th>
    <th>Item</th>
    <th>Item</th>
    <th>Item</th>
    <th>Item</th>
    <th>Item</th>
    <th>Total</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>

regarde maintenant le code ajax que j'ai fait pour recevoir les valeurs de mon tableau et envoyé dans le bdd est là : 

$("#btn_submit").click(function(){
    //get the form values
var arrayLignes = document.getElementById("table-body").rows; //on récupère les lignes du tableau
var longueur = arrayLignes.length;//on peut donc appliquer la propriété length
var valeurc = arrayColonnes.val;
 
for(var i=0; i<longueur; i++)//on peut directement définir la variable i dans la boucle
{
    var arrayColonnes[] = arrayLignes;//on récupère les cellules de la ligne
}
 
 var ID  = $('#ID').val();    
 var NAME = $('#NAME').val();    
 var PASSWORD = $('#PASSWORD').val();
 var CREDITS = $('#CREDITS').val();
 var EMAIL_ID = $('#EMAIL_ID').val();
 var CREATED_ON = $('#CREATED_ON').val();
 var MODIFIED_ON = $('#MODIFIED_ON').val();
 var valeurligne = $('arrayLignes[1]');
  
 // make the postdata
 // var postData = '&ID='+ID+'&NAME='+NAME+'&PASSWORD='+PASSWORD+'&CREDITS'+CREDITS+'&EMAIL_ID'+EMAIL_ID+'&CREATED_ON'+CREATED_ON+'&MODIFIED_ON'+MODIFIED_ON;
 // alert(postData);
 var myData={"IDN":ID,"NAMEN":NAME,"PASSWORDN":PASSWORD,"CREDITSN":CREDITS,"EMAIL_IDN":EMAIL_ID,"CREATED_ONN":CREATED_ON,"MODIFIED_ONN":MODIFIED_ON,"largeur":longueur,"valeur":valeurligne};
 //call your .php script in the background,
 //when it returns it will call the success function if the request was successful or
 //the error one if there was an issue (like a 404, 500 or any other error status)
 $.ajax({
    url : "Form_Data.php",
    type: "POST",
    data : myData,
    success: function(data,status,xhr)
     {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#ID').val();
        $('#NAME').val('');
        $('#PASSWORD').val('');
        $('#EMAIL_ID').val('');
        $('#CREATED_ON').val('');
        $('#MODIFIED_ON').val('');
         }
 
});
});

Ma page php est là : 

include 'connect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables
 
   $ID = $_POST['valeur'];
   $NAME =$_POST['valeur'];
   $EMAIL_ID =$_POST['valeur'];
   $PASSWORD =$_POST['valeur'];
   $CREDITS =$_POST['valeur'];
   $CREATED_ON=$_POST['valeur'];
   $MODIFIED_ON=$_POST['valeur'];
    
   $largeur = $_POST['largeur'];
    
    var_dump($_POST['largeur']);
     
   for($i=0; $i<$largeur; $i++)
    {
 
$query = "INSERT INTO `user_table`
         (`NAME`,`EMAIL_ID`,`PASSWORD`,`CREDITS`,`CREATED_ON`,`MODIFIED_ON`)
         VALUES
         ('$NAME','$EMAIL_ID','$PASSWORD','$CREDITS','$CREATED_ON','$MODIFIED_ON')";
         $query_run= mysql_query($query);
        // $retval=mysql_query($query,$conn);
          if ($query_run)
          {
                echo 'It is working';
          }
    }
 
   mysql_close($con);


Mais ça n'envoie rien dans ma bdd rien ne se produise au faite, tu peux avoir une idée à ce niveau? please!!!
Signaler
Messages postés
31458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 février 2021
 3 277
Bonjour,

Pour commencer....
remplace les "valeur" .. pas leur nom de variable dans ton code... 

 $ID = $_POST['valeur'];
   $NAME =$_POST['valeur'];
   $EMAIL_ID =$_POST['valeur'];
   $PASSWORD =$_POST['valeur'];
   $CREDITS =$_POST['valeur'];
   $CREATED_ON=$_POST['valeur'];
   $MODIFIED_ON=$_POST['valeur']




 $ID = $_POST['IDN'];
   $NAME =$_POST['NAMEN'];
   $EMAIL_ID =$_POST['PASSWORDN'];
 //etc....


Coté javascript ... ajoute le error dans l'ajax
en fonction de ta version de jquery... le .error ou le .fail

Pense aussi à regarder dans la console de ton navigateur si il n'y aurait pas des erreurs javascript et des messages concernant ton appel ajax.
NB: Pour voir les erreurs.. il faut soit passer par la console de firefox.... soit installer un plugin dans chrome pour prendre en charge l'ajax;



NB² : L'extension mysql est considérée comme obsolète. Passe à PDO ou mysqli.
Réponse 9 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
Merci @Jordan
Je suis passer en PDO et regarde à ce que ressemble mon code mais la même chose toujours : 
<?php
include 'connect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables

   $ID = $_POST['IDN'];
   $NAME =$_POST['NAMEN'];
   $EMAIL_ID =$_POST['EMAIL_IDN'];
   $PASSWORD =$_POST['PASSWORDN'];
   $CREDITS =$_POST['CREDITSN'];
   $CREATED_ON=$_POST['CREATED_ONN'];
   $MODIFIED_ON=$_POST['MODIFIED_ONN'];
   
   $largeur = $_POST['largeur'];
   
   //var_dump($_POST['largeur']);
	
   for($i=0; $i<$largeur; $i++)
	{

     $insert = $bdd->prepare('
                  INSERT INTO user_table (NAME,EMAIL_ID,PASSWORD,CREDITS,CREATED_ON,MODIFIED_ON) VALUES(:NAME, :EMAIL_ID, :PASSWORD, :CREDITS, :CREATED_ON,:MODIFIED_ON)
                  ');
                  $insert->execute(array(
                    'NAME' => htmlspecialchars($ID),
                    'EMAIL_ID' => htmlspecialchars($NAME),
                    'PASSWORD' => htmlspecialchars($EMAIL_ID),
                    'CREDITS' => htmlspecialchars($CREDITS),
                    'CREATED_ON' => htmlspecialchars($CREATED_ON),
                    'MODIFIED_ON' => htmlspecialchars($MODIFIED_ON),
                    ));	
	if ($insert){
	echo "OK";
	}

   mysql_close($con);
?>
Signaler
Messages postés
31458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 février 2021
 3 277
Tu as laissé des instructions mysql_
Et que contient ton fichier de connexion ?
Réponse 10 / 10
Messages postés
32
Date d'inscription
mercredi 30 mars 2016
Statut
Membre
Dernière intervention
31 juillet 2017
@Jordan j'ai réussi a envoyé mes données des inputs dans ma bdd dont voici le code côté ajax: 

$("#btn_submit").click(function(){
    //get the form values
var arrayLignes = document.getElementById("table-body").rows; //on récupère les lignes du tableau
var longueur = arrayLignes.length;//on peut donc appliquer la propriété length

for(var i=0; i<longueur; i++)//on peut directement définir la variable i dans la boucle
{
 //var arrayColonnes[1,i] = arrayLignes;//on récupère les cellules de la ligne
}

 var ID  = $('#ID').val();     
 var NAME = $('#NAME').val();     
 var PASSWORD = $('#PASSWORD').val();
 var CREDITS = $('#CREDITS').val();
 var EMAIL_ID = $('#EMAIL_ID').val();
 var CREATED_ON = $('#CREATED_ON').val();
 var MODIFIED_ON = $('#MODIFIED_ON').val();
 
 // make the postdata
 // var postData = '&ID='+ID+'&NAME='+NAME+'&PASSWORD='+PASSWORD+'&CREDITS'+CREDITS+'&EMAIL_ID'+EMAIL_ID+'&CREATED_ON'+CREATED_ON+'&MODIFIED_ON'+MODIFIED_ON;
 // alert(postData);
 var myData={"IDN":ID,"NAMEN":NAME,"PASSWORDN":PASSWORD,"CREDITSN":CREDITS,"EMAIL_IDN":EMAIL_ID,"CREATED_ONN":CREATED_ON,"MODIFIED_ONN":MODIFIED_ON,"largeur":longueur};
 //call your .php script in the background, 
 //when it returns it will call the success function if the request was successful or 
 //the error one if there was an issue (like a 404, 500 or any other error status)
 $.ajax({
    url : "Form_Data.php",
    type: "POST",
    data : myData,
    success: function(data,status,xhr)
     {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#ID').val();
        $('#NAME').val('');
        $('#PASSWORD').val('');
        $('#EMAIL_ID').val('');
        $('#CREATED_ON').val('');
        $('#MODIFIED_ON').val('');
         },
 error : function(data, status, erreur){

       }

}); 
})

grâce à ton conseil d'installer l'extension ajax mais un problème qui reste qui reste c'est d'envoyer les données de mon tableau crée dynamiquement et non des inputs mon code php est là : 
include 'connect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables

   $ID = $_POST['IDN'];
   $NAME =$_POST['NAMEN'];
   $EMAIL_ID =$_POST['EMAIL_IDN'];
   $PASSWORD =$_POST['PASSWORDN'];
   $CREDITS =$_POST['CREDITSN'];
   $CREATED_ON=$_POST['CREATED_ONN'];
   $MODIFIED_ON=$_POST['MODIFIED_ONN'];
   
   $largeur = $_POST['largeur'];
   
   //var_dump($_POST['largeur']);
	
   for($i=0; $i<$largeur; $i++)
	{

     $insert = $bdd->prepare('
                  INSERT INTO user_table (NAME,EMAIL_ID,PASSWORD,CREDITS,CREATED_ON,MODIFIED_ON) VALUES(:NAME, :EMAIL_ID, :PASSWORD, :CREDITS, :CREATED_ON,:MODIFIED_ON)
                  ');
                  $insert->execute(array(
                    'NAME' => htmlspecialchars($ID),
                    'EMAIL_ID' => htmlspecialchars($NAME),
                    'PASSWORD' => htmlspecialchars($EMAIL_ID),
                    'CREDITS' => htmlspecialchars($CREDITS),
                    'CREATED_ON' => htmlspecialchars($CREATED_ON),
                    'MODIFIED_ON' => htmlspecialchars($MODIFIED_ON),
                    ));	
					 if ($insert)
          { 
                echo 'It is working';
          }
	}
Posez votre question