formulaire et JS pour la premiere fois

**bilcosby** · 11/07/2009, 20h11

Bonjour à tous
je me lance dans le JS, pour les besoin d'un intranet (petit formulaire genre facturier)

En php, sql, ......et JS pour résoudre le problème suivant :

1er souci :
Un select qui propose des produits( récupérés dans la BDD) et dans la colonnes suivante, le prix (indiqué aussi dans la BDD) doit s'afficher automatiquement...

2eme souci:
l'input ou le prix s'affiche doit pouvoir être modifié sur l'instant si l'utilisateur veut modifier le prix juste pour l'occasion, et sans bousiller mon input évidement..

Je ne demande pas que l'on code à ma place (évidement), mais juste des infos pour éclairer ma lanterne car je ne sais pas par ou commencer...

merci de votre attention

**micetf** · 12/07/2009, 11h18

Bonjour,

Peut-être de quoi te mettre sur la piste...
et te permettre de commencer :

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
<?php 
$table=array(
	array('id'=>12,'nom'=>'savon','prix'=>5.1),
	array('id'=>15,'nom'=>'dentifrice','prix'=>1.1),
	array('id'=>17,'nom'=>'shampoing','prix'=>2.1)
	);
?>
<script type="text/javascript" language="Javascript">
var tab_produit=new Array();
<?php
foreach ($table as $row) {
?>
tab_produit[<?php echo $row['id']; ?>]= <?php echo $row['prix']; ?>;
<?php 
}
?>
function prix(produit) {
        idProduit = produit.options[produit.selectedIndex].value;
	if(idProduit != 0){
		idPrix=document.getElementById("prix");
		idPrix.value = tab_produit[idProduit];
	}
}
</script>

<select name="produit" onchange="prix(this)">
	<option value="0">--- choisir ---</option>
<?php
foreach ($table as $row) {
?>
	<option value="<?php echo $row['id']; ?>"><?php echo $row['nom']; ?></option>
<?php 
}
?>
</select>
<input id="prix" type="text" value=""/>

Ce qui me parait important :

L'attribut onchange sur la balise select indique
que l'on va appeler la fonction prix()
lorsque l'option va changer.
La fonction prix() affecte
le prix du produit sélectionné (produit.options[produit.selectedIndex].value)
à l'attribut value
de la balise ayant l'id="prix" (document.getElementById())

Fred

**bilcosby** · 12/07/2009, 11h39

Merci
je décrypte, je test, et je donne des nlles

Merci beaucoup

**bilcosby** · 18/07/2009, 22h29

salut, me revoila.

je suis complètement larguer, pas assez calé en JS.

je n'arrive pas à me reperer avec mon code, j'ai du sql au milieu et pas array:

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
 for($i=1;$i < 10;$i++)
     {
echo '<tr>
<td ><input   name="poids_'.$i.'" type="text" ></td>
 
<td ><select class="select" name="qualit_'.$i.'" > ';?>
 
<option  value="">choix</option>
 
<?php $liste = mysql_query("SELECT qualite FROM list_qualit ");
 
 while ($donnees = mysql_fetch_array($liste) )  {       ?>
 
<option  value="<?php echo $donnees[qualite]; ?>" >
 
<?php echo $donnees[qualite];?> </option> <?php } ;?>  
 
</select></td>
 
<td ><input  class="coment"  name="coment_'.$i.'" type="text" ></td>
 
<td ><input   name="prixkg_'.$i.'" type="text" ></td>
 
<td ><input  type="text"     name="somm_'.$i.'"></td>
 
</tr>

je ne vois pas comment je peux replacer ton array par la liste que j'ai dans la table.
Et dans l'hypothèse ou j'y arrive, refaire un array en js à partir d'une table, est-ce que c'est correct, ça ne fait pas double emplois ?

Merci de ton aide...

ps: c'est vraiment pas évident le JS

**micetf** · 20/07/2009, 08h23

Bonjour,

Mon idée était de coder quelque chose qui ressemble à cela :

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
<?php
/********************************************************************
*                       JAVASCRIPT + PHP 
*         Création des array,  Fonction afficherPrix()
*********************************************************************/
?>
<script type="text/javascript" language="Javascript">
var produits=new Array();
<?php
$produits=array();
$result = mysql_query("SELECT * FROM produit");
while ($row = mysql_fetch_array($result)) {
//      Array $produits (PHP)   
        $produits[] = $row;
?>
// 	Array Produits (Javascript)
	produits[<?php echo $row['id']; ?>]= <?php echo $row['prix']; ?>;
<?php
}
?>
// Fonction afficherPrix(produit,ligne)    
//	produit : produit sélectionné dans le select
//	ligne : ligne de la table html dans laquelle a été fait la sélection 
function afficherPrix(produit,ligne) {
    idProduit = produit.options[produit.selectedIndex].value;
	if(idProduit != 0){
		idPrix=document.getElementById("prix"+ligne);
		idPrix.value = produits[idProduit];
	}
}
</script>
 
<!--
********************************************************************
*			HTML + PHP 
*	          Affichage de la page
*********************************************************************/ 
-->
<form action="" method="post">
<table>
	<?php
        for($ligne=0;$ligne<10;$ligne++) {
        ?>
		<tr>
			<td >
				<select name="produit[<?php echo $ligne; ?>]" class="select" onchange="afficherPrix(this,<?php echo $ligne; ?>)"> 
					<option value="">choix</option>
					<?php foreach ($produits as $produit) { ?>
					<option value="<?php echo $produit['id']; ?>"><?php echo $produit['nom']; ?></option>
					<?php } ?>
				</select>
			</td>
			<td ><input type="text" name="prixkg[<?php echo $ligne; ?>]" id="prix<?php echo $ligne; ?>"></td>
			<td ><input type="text" name="poids[<?php echo $ligne; ?>]"></td>
			<td ><input type="text" name="somm[<?php echo $ligne; ?>]"></td>
		</tr>
	<?php
        }
        ?>
</table>
</form>

Mais ça reste à adapter !
Fred

**bilcosby** · 22/07/2009, 17h02

Un grand merci pour ton aide.
j'ai tenter d'adapter, ....

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
<?php
/********************************************************************
*                       JAVASCRIPT + PHP 
*         Création des array,  Fonction afficherPrix()
*********************************************************************/
?>
<script type="text/javascript" language="Javascript">
var produits=new Array();
<?php
$produits=array();
$result = mysql_query("SELECT id,qualite,prix FROM $table_3 ");
while ($row = mysql_fetch_array($result)) {
//      Array $produits (PHP)   
        $produits[] = $row;
?>
// 	Array Produits (Javascript)
	produits[<?php echo $row['id']; ?>]= <?php echo $row['prix']; ?>;
<?php
}
?>
// Fonction afficherPrix(produit,ligne)    
//	produit : produit sélectionné dans le select
//	ligne : ligne de la table html dans laquelle a été fait la sélection 
function afficherPrix(produit,ligne) {
    idProduit = produit.options[produit.selectedIndex].value;
	if(idProduit != 0){
		idPrix=document.getElementById("prix"+ligne);
		idPrix.value = produits[idProduit];
	}
}
</script>
 
<!--
********************************************************************
*			HTML + PHP 
*	          Affichage de la page
*********************************************************************/ 
-->
<form action="" method="post">
<table>
	<?php
        for($ligne=0;$ligne<10;$ligne++) {
        ?>
		<tr>
			<td >
				<select name="$table_3[<?php echo $ligne['prix']; ?>]" class="select" onchange="afficherPrix(this,<?php echo $ligne; ?>)"> 
					<option value="">choix</option>
					<?php foreach ($produits as $produit) { ?>
					<option value="<?php echo $produit['id']; ?>"><?php echo $produit['qualite']; ?></option>
					<?php } ?>
				</select>
			</td>
			<td ><input type="text" name="prixkg[<?php echo $produit['prix']; ?>]" id="prix<?php echo $ligne; ?>"></td>
			<td ><input type="text" name="poids[<?php echo $ligne; ?>]"></td>
			<td ><input type="text" name="somm[<?php echo $ligne; ?>]"></td>
		</tr>
	<?php
        }
        ?>
</table>
</form>