[JS/PHP] Formulaire dynamique : ajout de ligne et requete SQL

**Argol** · 09/03/2009, 14h39

Bonjour,
j'ai un formulaire JAVASCRIPT pour ajouter des lignes à un tableau
Chaque ligne comprend des input type=text ansiqi qu'un span a la fin pour le total de la ligne.

j'aimerais pouvoir ajouter une ligne de ce formulaire non pas par le bouton Ajouter une ligne mais par une requete SQL et que les valeurs de ems input (.value) prenne le resultat de ma requete.

Voila ma requete :

Code :

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

1
2
3
4
5
6
 
$selectp = "SELECT reference,Designation,Quantite,PrixUniteHorsTaxe,Remise FROM produit WHERE IdCommande='$idurl'";
$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
  while($rowp = mysql_fetch_array($resultp)) {
  AddRow2();
  }

et voila AddROW2 : fonction qui me permet d'ajouter une ligne (à chaque fois qu'il en trouve une dans la base grâce au "while" de la requête) sauf que j'aimerais que input.value soit affecter du résultat de ma requête

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<script type="text/javascript">
 
var compteur=0;
function AddRow2(){
 
compteur++; //ajout d'un ligne on incremente le compteur
//liste de tout les input que l'on trouve dans le tableau ligne d e produit
var input0=document.createElement('input');
input0.type = 'button';
input0.name ="supprimer";
input0.value="Supprimer";
 
input0.onclick=function()
{
suppression(this.parentNode.parentNode.id);
}
 
 
var input1=document.createElement('input');
input1.type = 'text';
input1.name ="ref_"+compteur;
var input2=document.createElement('input');
input1.style.width="56px";
input1.value= // $rowp['Reference']; //comment faire pour que la valeur prenne le resultat de ma requete 
 
 
input2.type = 'text';
 
input2.name ="designation_"+compteur;	
input2.style.width="170px";
 
var input3=document.createElement('input');
input3.type = 'text';
input3.name ="qte_"+compteur;	
input3.id="qté_"+compteur;
input3.ref = compteur;
input3.style.width="60px";
input3.onkeyup = function(){
    check(this.ref);
	total();
	}
input3.onchange=function(){
 
total();
}
var input4=document.createElement('input');
input4.type = 'text';
input4.name ="pu_"+compteur;
input4.id="prix_"+compteur;
input4.ref = compteur;
input4.style.width="80px";
input4.onkeyup = function(){
    check(this.ref); 
	total();
	}	
input4.onchange=function(){
 
total();
}	
 
var input5=document.createElement('input');
input5.type = 'text';
input5.name ="remise_"+compteur;
input5.id="remis_"+compteur;
input5.ref = compteur;
input5.style.width="70px";
input5.onkeyup = function(){
    check(this.ref);
		total();
	}	
input5.onchange=function(){
 
total();
}
 
 
//on crée un nouvelle ligne puis les nouvelles cellules a l'interieur
    var newRow = document.getElementById('table').insertRow(-1);
	newRow.id="ligne"+compteur;
    var newCell = newRow.insertCell(0);
 newCell.appendChild(input0);
	 newCell = newRow.insertCell(0);
	newCell.appendChild(input1);
    newCell = newRow.insertCell(1);
    newCell.appendChild(input2);
	 newCell = newRow.insertCell(2);
   newCell.appendChild(input3);
	 newCell = newRow.insertCell(3);
     newCell.appendChild(input4);
	 newCell = newRow.insertCell(4);
   newCell.appendChild(input5);
	 newCell = newRow.insertCell(5);
 
    newCell.innerHTML = ' <span id="result_'+compteur+'"></span>';
 
 
}

Merci !

**Argol** · 09/03/2009, 15h23

personne ?
appermement il y a des truc du coté de l'AJAX mais je sais pas du tout comment sa marche ?
envoyé une requete SQL a un fichier XML ?
recupere cette requete ?

Code :

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

1
2
3
4
5
$selectp = "SELECT Reference,Designation,Quantite,PrixUniteHorsTaxe,Remise FROM produit WHERE IdCommande='$idurl'";
$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
  while($rowp = mysql_fetch_array($resultp)) {
  AddRow2(); //AJOUT DE LIGNE A CHAQUE LIGNE DANS LA TABLE IMPOSSIBLE CODE JAVASCRIPT DANS PHP ! SOLUTION ?
  }

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">


var compteur=0;
function AddRow2(){

compteur++; //ajout d'un ligne on incremente le compteur
//liste de tout les input que l'on trouve dans le tableau ligne d e produit
var input0=document.createElement('input');
input0.type = 'button';
input0.name ="ref_compteur";
input0.value="RESULTAT DE LA REQUETE ICI";

**andry.aime** · 09/03/2009, 15h28

Tu fais appel à un fonction javascript depuis php, c'est impossible.

$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
while($rowp = mysql_fetch_array($resultp)) {
AddRow2();
}

Ce que tu devrais faire c'est récupéré le résultat de requête dans XML ou JSON et tu fais un traitement javascript à partir du résultat.

Code :

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

1
2
3
4
5
6
header("Content-type:text/xml");
			echo'<?xml version="1.0" encoding="ISO-8859-1"?><elements>';
while($rowp = mysql_fetch_array($resultp)) {echo '<element>';
echo '<ref>'.$rowp['Reference'].'</ref>';..
echo'</element>';}
echo'</elements>';

Code :

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
24
25
26
27
28
29
function recuperer(idurl)
{
	var xhr=createXHR();
	document.getElementById('form').style.visibility='visible';
	var rst;
	xhr.open("POST", "page.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{
			if(xhr.status == 200)
			{
				rst=xhr.responseXML;
				nbligne=rst.getElementsByTagName('element').length-1;
					for(i=nbligne; i>=0; i--)
					{
						alert(rst.getElementsByTagName('ref')[i].childNodes[0].nodeValue);
					}
			}	
			else	
			{
				alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
			}	
		} 
	}
	var data='idurl='+idurl
	xhr.send(data); 
}

**Argol** · 09/03/2009, 16h18

whaou

merci beaucoup pour la reponse !
donc j'ai le premier code dans page.php avec ma requete ce qui me donne :

Code :

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
24
25
<?php
$connect = mysql_connect("localhost","root","") or die("erreur de connexion au serveur $host");
mysql_select_db("Colis", $connect);
 
$selectp = "SELECT Reference FROM produit WHERE IdCommande='$data'";
$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
 
header("Content-type:text/xml");
echo'<?xml version="1.0" encoding="ISO-8859-1"?><elements>';
 
 
 
 
 
while($rowp = mysql_fetch_array($resultp)) 
{echo '<element>';
echo '<ref>'.$rowp['Reference'].'</ref>';
 
echo'</element>';}
 
 
echo'</elements>';
 
 
?>

je suppose que le $idurl de la requête doit être remplacé par le $data si j'ai bien compris car $data est envoyé par la fonction recuperer()
j'ai raison ?

donc ensuite la fonction recupere(idurl) que j'ai mis dans mon formulaire dynamique c'est un jolie morceau lol

je comprend pas trop ce quel fait la fonction

elle retourne quelque chose ?

comment je peux me servir de cette fonction pour inserer dans les .value la valeur de ma requête en incrémentant les lignes a chaque fois ?

Code :

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

1
2
3
4
5
6
7
8
 $idurl=$_GET['idcommande']; 
 
function addrow()
{
compteur++;
input0.name='ref'+i;
input0.value=recuperer( $idurl);
}

? puisque il faut effctivement que sa m'ajoute une ligne de tableau avec pour valeur ma requete

Merci.

**andry.aime** · 10/03/2009, 08h22

Salut,

Code :

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

1
2
3
 
$data=$_POST['idurl']
$selectp = "SELECT Reference FROM produit WHERE IdCommande='$data'";

Dans mon exemple, la fonction recuperer retourne tous les enregistrements du requête SQL donc pour l'ajout de ligne dans ton addrow, tu dois le mettre dans le bloc

Code :

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

1
2
3
4
for(i=0; i<=nbligne; i++) // nbligne+1est le nombre de ref retourné
	{
// Ajout de ligne de ton addrow ICI avec la valeur rst.getElementsByTagName('ref')[i].childNodes[0].nodeValue
	}

Tu refais le même erreur, javascript dans php

$idurl=$_GET['idcommande'];

function addrow()
{
compteur++;
input0.name='ref'+i;
input0.value=recuperer( $idurl);
}

Pour l'ajout d'element dans une page, visite le forum jS

**Argol** · 10/03/2009, 09h29

Salut
oki merci ,j'ai donc mes deux codes :

page.php

Code :

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
24
25
26
27
<?php
$connect = mysql_connect("localhost","root","") or die("erreur de connexion au serveur $host");
mysql_select_db("Colis", $connect);
 
$data=$_POST['idurl'];
 
$selectp = "SELECT Reference FROM produit WHERE IdCommande='$data'";
$resultp = mysql_query($selectp,$connect) or die ('Erreur : '.mysql_error() );
 
header("Content-type:text/xml");
echo'<?xml version="1.0" encoding="ISO-8859-1"?><elements>';
 
 
 
 
 
while($rowp = mysql_fetch_array($resultp)) 
{echo '<element>';
echo '<ref>'.$rowp['Reference'].'</ref>';
 
echo'</element>';}
 
 
echo'</elements>';
 
 
?>

et AddRow2() que j'execute par un onload=AddRow2(); a l'ouverture de la page.

voici addRow2()

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript">
 
var compteur=0;
function AddRow2()
{
var xhr=createXHR();
	document.getElementById('form').style.visibility='visible';
	var rst;
	xhr.open("POST", "page.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{
			if(xhr.status == 200)
			{
				rst=xhr.responseXML;
				nbligne=rst.getElementsByTagName('element').length-1;
 
			for(i=0; i<=nbligne; i++) // nbligne+1est le nombre de ref retourné
				{
			compteur++; //ajout d'un ligne on incremente le compteur
 
 
		var input1=document.createElement('input');
		input1.type = 'text';
		input1.name ="ref_"+compteur;
		input1.style.width="56px";
		input1.value=rst.getElementsByTagName('ref_')[i].childNodes[0].nodeValue;
		document.getElementById('UnDiV').appendChild(input1);
 
 
 
 
//on crée un nouvelle ligne puis les nouvelles cellules a l'interieur (test pour une cellule)
    var newRow = document.getElementById('table').insertRow(-1);
	newRow.id="ligne"+compteur;
 
	newCell.appendChild(input1);
    newCell = newRow.insertCell(1);
 
				}
			}
			else	
			{
				alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
			}	
		} 
	var data=idurl;
	xhr.send(data); 
	}
 
}

et cela ne marche malheuresement pas

Si quelq'un a une idée je lui serait reconnaissant.
Merci.

**Bovino** · 10/03/2009, 09h48

Code :

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

input1.value=rst.getElementsByTagName('ref_')[i].childNodes[0].nodeValue;

Le problème est que dans le XML généré en PHP, tu ne sembles pas créer de balise ref_ !
Il serait probablement mieux d'écrire :

Code :

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

input1.value=rst.getElementsByTagName('ref')[i].childNodes[0].nodeValue;

Enfin, ta variable compteur est-elle vraiment utile ?

**Argol** · 10/03/2009, 10h13

effectivement de ce coté la il y a un problème donc j'ai enlever le "_"

le compteur est important car c'est une variable globale dont je me sers pour ajouter des lignes faire des calculs etc... mais je pense pas que le problème vienne de la ; car effectivement sa ne fonctionne toujours pas

**Argol** · 10/03/2009, 10h20

peut etre du coté de

Code :

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

 <?php $idurl=$_GET['idcommande']; ?>

Code :

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

1
2
3
4
5
6
 
 
var data=idurl;
 
 
	xhr.send(data);

et

Code :

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

$data=$_POST['idurl'];

?
c'est bien comme sa que li'd url est recupéré ?

**Bovino** · 10/03/2009, 10h29

Euh... non, pas vraiment

Code :

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

1
2
var data="idurl=" + idurl;
xhr.send(data);

Les paramètres sont envoyés sous forme de paires : "nom=valeur" et tu récupères en PHP $_POST['nom'] dont le contenu est 'valeur'.

**Argol** · 10/03/2009, 10h38

oki merci j'aurais pas du changer lol mais sa fonctionne toujours pas

bon ben je comprend vraiment pas la pourquoi sa marche pas même si ma me mettai pas la valeur de la requête sa pourrai au moins me créer la cellule du tableau

même pas

**Argol** · 10/03/2009, 11h28

personne ?

il me sert a quoi le code suivant ?

j'ai pas d'id "UnDiv"

Code :

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

document.getElementById('UnDiV').appendChild(input1);

**andry.aime** · 10/03/2009, 11h41

Pour l'ajout d'element dans une page, visite le forum jS
Installe Firebug pour voir les erreurs.

**Argol** · 10/03/2009, 12h06

le code AddRow2 ets une copie de Addrow classique et AddRow marhce trés bien pour ajouter des lignes !

donc le code :

Code :

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
var input1=document.createElement('input');
		input1.type = 'text';
		input1.name ="ref"+compteur;
		input1.style.width="56px";
		input1.value=rst.getElementsByTagName('ref')[i].childNodes[0].nodeValue;
		//document.getElementById('UnDiV').appendChild(input1);
 
 
 
 
//on crée un nouvelle ligne puis les nouvelles cellules a l'interieur (test pour une cellule)
    var newRow = document.getElementById('table').insertRow(-1);
	newRow.id="ligne"+compteur;
	var newCell = newRow.insertCell(1);
 
 
	newCell.appendChild(input1);
    newCell = newRow.insertCell(1);

devrait fonctionner...

j'ai firebug j'ai mis dans les options "arrêter a chaque erreur" et il ne s'arrête jamais....

**andry.aime** · 10/03/2009, 12h11

On veut savoir ce qu'il y a dans le consol (Post, Réponse).

**Argol** · 10/03/2009, 12h52

tient j'ai une erreur qui s'affiche rapidement au début :
create XHR is undefinned

et a propos de :

document.getElementById('form').style.visibility='visible';

j'ai pas d'id qui s'apelle form non plus !
c'est pas mon tableau "table" qui faut que je mette ?

**andry.aime** · 10/03/2009, 13h02

Voici la fonction

Code :

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
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}

**Argol** · 10/03/2009, 13h13

oki, merci maintenant j'ai donc
document.getElementById("form") is null

je remplace
document.getElementById('form').style.visibility='visible';

par

document.getElementById('table').style.visibility='visible';

?

**andry.aime** · 10/03/2009, 13h23

document.getElementById("form") is null

C'est que tu n'a pas un objet dont l'id est form;

document.getElementById('table').style.visibility='visible';

Est ce que tu possède un tobjet d'id 'table'? Si c'est le cas, tu ne devrais pas avoir d'erreur.

**Argol** · 10/03/2009, 13h33

ben oui c'est mon tableau la ou je veux ajouter des lignes mais elle sert a quoi cette instruction ? pce je suis pas sur que sa soit l'id de mon tableau qu'il faut que je mette la

si je change par 'table' plus d'erreur mais sa marche toujours pas
whaouuu une journée la dessus et marche toujours pas

[JS/PHP] Formulaire dynamique : ajout de ligne et requete SQL

JavaScript

Discussions similaires

Partager

Partager