Insérer le contenu d'un <table> dans une table mysql

kodass · 5 Novembre 2013

Bonjour à tous.
J'ai un tableau html qui contient en ligne les articles achetés et en colonne (Id_Prouit, nom_Produits,quantité, prix total). Je voudrais mettre le contenu de ce tableau dans un "Array" pour les insérer dans ma base mysql ; ci-après la fonction.

Java:

function validerPanier()
{
	var arrayLignes = document.getElementById("Panier").rows;
	var nbrLigne = arrayLignes.length;
	var MonTableau = new Array(nbrLigne,nbrColonne);
        for(var i=2; i<nbrLigne; i++)
	{
    		var arrayColonnes = arrayLignes[i].cells;
    		var nbrColonne = arrayColonnes.length;
    		for(var j=0; j<nbrColonne; j++)
    		{
			MonTableau[i,j]=arrayColonnes[j].textContent;
			alert("ligne " + i +" colone " + j + " = " + monTableau[i,j]);
    		}
	}
	alert("nombre de ligne = "+nbrLigne);
	alert("nombre de colonne = "+nbrColonne);
}

Pour vérifier cette fonction j'ai procéder par des "alert" ça marche ligne par ligne (dans le code ci-haut). Et le code suivant pour vérifier le contenu en entier

JavaScript:

for(var i=2; i=nbrLigne; i++)
{
	for(var j=0; j<nbrColonne; j++)
	{
		alert("ligne " + i +" colone " + j + " = " + MonTableau[i,j]);
	}
}

Mais à la fin je n'arrive pas à lister le contenu de toute la table. Seule la dernière ligne est affichée. Pouvez vous m'aider ? Ou y a t-il un autre moyen pour insérer le contenu de cette <table> dans ma table mysql ? Merci.

andrelec1 · 9 Novembre 2013

Salut,

for(var i=2; i=nbrLigne; i++) devrait plutôt être
for(var i=2; i<nbrLigne; i++) ou
for(var i=2; i==nbrLigne; i++)

Ceci dit je ne comprend pas ce que tu fais ... car bon entre mysql et js doit y avoir un truc ... des deux technologie ne savent pas communiquer etre elle nativement ... ( ou alors cela fais trop longtemps que je n'est pas mis le nez dehors ) !

kodass · 11 Novembre 2013

Bonjour et merci andrelec1 pour la réponse.
Pour "==" je m'en suis rendu compte et j'ai corrigé. Quant au 2ème volé de ta réponse, t'a raison il n'y a pas de communication entre js et mysql. Moi j'ai voulu mettre le contenu du tableau <table> que j'ai nommé "panier" dans un array que je récupère et j'insère dans ma base via une page php. A vrai dire je ne sais pas si ça fonctionne ; j'essaie. Si vous avez une autre solution je suis preneur et merci encore.

andrelec1 · 11 Novembre 2013

Bas la solution consisterais a construire un formulaire a l'aide de JavaScript, pour recup toute les infos !

Généralement je fais en sorte de ne pas me retrouvais dans ce cas la, car la solution que je vais te donner reste a mes yeux trop fragile face au faille XSS, et surtout si le visiteur désactive JavaScript bas plus rien de marche !!!

Donc la technique comme dit plus haut vas consister a intercepter l’évent submit du formulaire pour le réécrire avant de l'envoyer !
Donc on s'abonne a l’évent onsubmit du formulaire de façon a appeler notre fonction avant l'envoie

JavaScript:

<form id="form1" method="post" action="#" onsubmit=" return (formremake());">

maintenant on s'attaque a formremake();

Deux solution : soit la méthode barbare ou tu envoi ligne par ligne
soit tu construire tous ton formulaire !

option 1 :
Un peut de js :

JavaScript:

<script type="text/javascript">
var heros = ["Batman", "Rize", "Heimerdinger", "Soraka"];
document.write(heros.toString()); // écrit: Batman,Rize,Heimerdinger,Soraka
</script>

JavaScript:

//Puis on ajoute un champ hidden a notre formulaire et on lui donne la valeur que l'on veux 
// plusieur technique, createElement ou autre , un peut jquery fais comme tu veux ^^ 
var inp = document.getElementById('<id du input hidden>');
inp.value = heros.toString();

Et coter PHP c'est simple ...

PHP:

$numChamps = explode( ',' , $_REQUEST['champs_a_valider'] );

C'est bien beau mais moi je préfère la deuxième méthode qui consiste a construire un vraie formulaire et a utilisé un propriété peut connue des formulaire et de php !

Donc tu vas quand même devoir construire un formulaire mais tu vas le faire de cette manière :

XML:

<form ....>
<input name="person[0][first_name]" value="john" />
<input name="person[0][last_name]" value="smith" />
...
<input name="person[1][first_name]" value="jane" />
<input name="person[1][last_name]" value="jones" />
</form>

et quand tu submit , tu recup :

PHP:

<?php
var_dump($_POST['person']);
array (
0 => array('first_name'=>'john','last_name'=>'smith'),
1 => array('first_name'=>'jane','last_name'=>'jones'),
)
?>

Après faut voir ton cas précis , tu peut aussi très bien faire ça par AJAX, ou encore repenser ton truc pour ne pas gérer ton panier en js ( ce qui est le mieux je pense ) !

PS: console.log(Array(16).join("hero" -1) + " Batman"; //

kodass · 12 Novembre 2013

Salut à tous, et merci antrelec1 pour cet exposé.
N'étant pas expérimenté en JS

et nul en jquery :ouch:

, je crois que la 2 ème solution me convient le mieux. Toutefois pour construire le formulaire et les <input>, il me faut connaitre, à l'avance le nombre d'articles choisis dans le panier. Non ?

andrelec1 · 13 Novembre 2013

oui ^^

zeb · 13 Novembre 2013

Plop,

Ou pas !
A méditer :

PHP:

<script type="text/javascript">
	function OnButtonAddClick(btn)
	{
		var inputCount = (btn.form.getElementsByTagName("input").length-1)/2;

		var newBreak     = document.createElement("br"   );
		var newFirstName = document.createElement("input");
		var newLastName  = document.createElement("input");

		newFirstName.setAttribute("name", "person["+inputCount+"][first_name]");
		newLastName .setAttribute("name", "person["+inputCount+"][last_name]");

		btn.parentElement.insertBefore(newBreak,     btn);
		btn.parentElement.insertBefore(newFirstName, btn);
		btn.parentElement.insertBefore(newLastName,  btn);
	}
</script>

<form action="http://localhost" method="post" id="my_form">
	<input name="person[0][first_name]"/><!--
	--><input name="person[0][last_name]" /><!--
	--><input type="button" onclick="javascript:OnButtonAddClick(this);" value="+" />
</form>

kodass · 13 Novembre 2013

Salut ; et merci zeb pour la réponse. Tu veux bien m'explique qu'est ce qu'il fait ce code ? Merci.

andrelec1 · 13 Novembre 2013

Effectivement a méditer...
( En gros le script de zeb crée le formulaire ... )

Enfin si l'on avais un exemple de tableau; ont pourrais faire un petit script sur mesure!

kodass · 14 Novembre 2013

Bonsoir. Suite à ta demande andrelec1 je joint ci-après le html qui crée le tableau :

HTML:

<table id="Panier" border="0"  bgcolor="#FFFFFF" width="100%">
	<tr>
		<th width="5%" align="center">&nbsp;</th>
		<th width="38%" align="center">Article</th>
		<th width="19%" align="center">Quantit&eacute;</th>
		<th width="19%" align="center">Prix Unitaire</th>
		<th width="19%" align="center">Montant article</th>
	</tr>
	<tr></tr>
</table>

Ensuite je remplis le tableau par la fonction suivante que j'appelle onclick d'un bouton d'un formulaire sur la même page

JavaScript:

function ajoutPanier(f, calTot)
	{
	var t=document.getElementById("Panier").tBodies[0];
        var tr, td;
//******************Création de la ligne du tableau panier**********
 	tr=document.createElement("tr");
//******************Remplir les cellules de la ligne****************
		for(i=0;i<5;i++)
		{
		td=document.createElement("td");
	       td.appendChild(document.createTextNode(f[i].value));
		tr.appendChild(td);
		}
//******************Sur double click Effacer la ligne**************		
tr.ondblclick = function(){
var content = this.cells[3].textContent || this.cells[3].innerText;
totalPanier.value =parseInt(totalPanier.value)-content;
this.parentNode.removeChild( this);
					}
//******************Ecrir la ligne********************************** 	
		t.appendChild(tr);
//******************Calcul du total du panier***********************
     totalPanier=document.getElementById("total");
    totalPanier.value = parseInt(calTot.value)+parseInt(totalPanier.value);
		}

zeb · 15 Novembre 2013

Salut,

A lire ton code, je pense que tu es largement armé pour comprendre le mien !!!

kodass · 15 Novembre 2013

zeb :

Les apparences sont trompeuses. Si je l'étais je n'aurai pas eu besoin de demander de l'aide. Eh bien je suis planté et je n'arrive pas à m'en sortir.

andrelec1 · 15 Novembre 2013

Bon sa pique un peut mais sa marche ^^ !
Enfin pour un tableau :

XML:

<table id="Panier" border="0" bgcolor="#FFFFFF" width="100%">
    <tr>
        <th width="5%" align="center"> </th>
        <th width="38%" align="center">Article</th>
        <th width="19%" align="center">Quantité</th>
        <th width="19%" align="center">Prix Unitaire</th>
        <th width="19%" align="center">Montant article</th>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
        <td>b</td>
        <td>b</td>
        <td>b</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>c</td>
        <td>c</td>
        <td>c</td>
        <td>c</td>
    </tr>
</table>

Si l'on a un formulaire avec comme id="FF"
( c'est la qu'il faut mettre les goutes dans les yeux ! )

JavaScript:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    function genform(){
        $("#Panier tr").each(function(z, r){
            $.each(r.children, function(t, y){
                if(y.tagName == "TD"){
                    $("#FF").append("<input type='text' name='article["+z+"]["+t+"]' value='"+ y.textContent+"' />");
                }
            });
        });
    }

</script>

( PS: foutu bug du lien cliquable dans le code -_-" )

Insérer le contenu d'un <table> dans une table mysql

kodass

andrelec1

kodass

andrelec1

kodass

andrelec1

zeb

kodass

andrelec1

kodass

zeb

kodass

andrelec1