Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provena

Résolu
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010 - 23 août 2010 à 12:07
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010 - 24 sept. 2010 à 10:30
Bonjour à tous,
Je dispose d'un formulaire avec 3 champs textes que je desire remplir automatiquement après la selection d'une ligne d'enregistrement (3 elements sur la ligne) provenant de la liste d'une fenêtre popup.
Cette popup est ouverte après la selection d'un element contenu dans une liste sur mon formulaire.
problème: lorsque je selectionne la ligne, elle renseigne les 3 champs de mon formaulaire avec les 3 elements qui devrait être séparés.
Comment affecter à chaque champ de mon formulaire sa valeur respective.

le code du formulaire

<FORM NAME = "formulaire" METHOD="POST" ACTION="">
Type de produit,
<select name="type_produit"><option value="" selected="selected">-- Sélectionnez un type de produit --</option>
<?php
// Fonction de connexion à la base de données
connexion_DB('db');

$sql = "SELECT * FROM type";
$query = mysql_query($sql);
while($donnees = mysql_fetch_object($query))
{
echo "<option value='".$donnees->id."' onClick=\"OuvrirPopup('/db/list_pro_serveur.php','liste','widtd=400,height=200,menubar=no,status=no,left=5,top=5')\">".$donnees->appelation."</option>";
}
?>
</select>,

<table border=\"0\" align=\"left\" cellspacing=\"1\" cellpadding=\"0\">
----

Reference,
Designation,
PUHT,

----

,

,


</table>
</FORM>


code de la fenêtre

<HTML>
<HEAD>
<TITLE>popup des produits</TITLE>

<SCRIPT language="javascript">
function Reporter(l) {

window.opener.document.getElementById('reference').value += document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text +'\n';
window.opener.document.getElementById('ref').value +=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value +';';
window.opener.document.getElementById('designation').value += document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text +'\n';
window.opener.document.getElementById('des').value +=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value +';';
window.opener.document.getElementById('puht').value += document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text +'\n';
window.opener.document.getElementById('pu').value +=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value +';';
}
</SCRIPT>

</HEAD>

<CENTER>



<FORM>


<SELECT name="liste" id="liste" onChange="Reporter(this)">
<option value="" selected="selected">-- Sélectionnez une valeur --</option>
<tr align="left">

<td>
<?php

//connection au serveur:
$connect = mysql_connect( '127.0.0.1', 'root', '' );

//sélection de la base de données:
mysql_select_db('db',$connect) ;


$sql = "SELECT *
FROM produit
WHERE reference like 'S%'";
$query = mysql_query($sql);

while($donnees = mysql_fetch_object($query))
{
//echo "<option value='".$donnees->id."'>".$donnees->reference."</option>";
echo "<option value='".$donnees->id."'>".$donnees->reference." ".$donnees->designation." ".$donnees->prix_unitaire." </option>";
}
?>
</td>
</tr>
</select>

</FORM>

</CENTER>
</HTML>

34 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
8 sept. 2010 à 22:26
pour commencer oublies
<SCRIPT language="javascript">
pour mettre à la place
<script type="text/javascript">

Ne mets pas le code PHP mais le code généré par celui ci, après affichage de la page
click droit -> Afficher la source -> copier/coller
Merci d'utiliser les balises de code pour plus de lisibilité, ils gardent l'indentation et colore le code...

Concernant la fonction d'ajout des OPTIONs à tes SELECTs, tu n'en est pas loin sauf que la fonction ne retournant rien tu n'exploites donc pas le résultat...

Compte tenu que tu as plusieurs SELECTs, mais avec des bornes et des incréments différents il est préférable de créer une fonction "générique" en passant en paramètres les bornes et incrément...
//-----------------------------------
function Ajout_Opt( min_, max_, inc_){
  max_++;                                       // incremente pour le test
  var szTmp = "<option selected>---<\/option>"; // init de la liste
  for( var i = min_; i < max_; i+= inc_){
    szTmp += "<option>" +i +"<\/option>";       // ajout option
  }
  return( szTmp);                               // retourne la chaine
}

tu n'as plus qu'a écrire dans le SELECT de la façon suivante
tab[2].innerHTML = Ajout_Opt( 1, 1000, 1);


;O)
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
9 sept. 2010 à 11:13
Bonjour petroteam,
Grand merci pour ta reponse.Après application, j'ai toujours une liste noire et je ne comprends plus rien.Aussi, je ne comprends pas [b]Ne mets pas le code PHP mais le code généré par celui ci, après affichage de la page
click droit -> Afficher la source -> copier/coller
Merci d'utiliser les balises de code pour plus de lisibilité, ils gardent l'indentation et colore le code/b et la différence entre
<SCRIPT language="javascript"> et <script type="text/javascript">
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
11 sept. 2010 à 20:23
Bonsoir PetroleTeam,
Après application ça marche à merveille!
merci infiniment
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
11 sept. 2010 à 22:17
Bonjour,
si tu me promets de ne plus m'appeler PetroleTeam mais PetoleTeam
alors je te mets un code complet reprenant l'essentiel de ton problème, enfin ancien problème.

Bon je ne suis pas rancunier donc je te le livre cette exemple fait sur base de ce qui me semble être ton besoin.
Quelles que améliorations et les commentaires t'aideront j'en suis sûr !
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<title>Creation INPUT et SELECT</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana;
  font-size : 13px;
}
th {
  width : 100px;
  font-size : 11px;
  background-color : #e0e0e0;
}
table {
  border : 1px solid #c0c0c0;
  border-collapse : collapse;
  text-align : center;
}
</style>
<script type="text/javascript">
//-- Constante pour lisibilite--//
var REFERENCE   = 0;
var DESIGNATION = 1;
var PRIX        = 2;
//--------------------------------
function Fct_Select( this_, dest_){
  var Obj = this_;
  //-- Recup de la TR parent dans la TABLE
  while(( Obj = Obj.parentNode).tagName !== "TR"){}
  //-- Recup numero ligne
  var RowNum = Obj.rowIndex;
  //-- recup Valeur
  var Val   = parseFloat( this_.options[this_.selectedIndex].value);
  //-- Message pour DEBUG
  var szMsg = 'Nous sommes sur la ligne -> ' +RowNum;
  szMsg    +'\nValeur du SELECT(' +this_.id +') ' +Val;
  alert( szMsg);
  //-- Si dest_ en parametre alors affectation valeur
  if( dest_ != null){
    document.getElementById( dest_ +RowNum).value = Val;
    //-- Replace sur ligne 0
    this_.selectedIndex = 0;
  }
}
//--------------------------------------------
function Ajout_Option( obj_, min_, max_, inc_){
  max_++;                                // incremente pour le test INF dans boucle
  obj_.options.length = 0;               // vide le SELECT
  obj_.options[0] = new Option("- ? -"); //Ajoutes 1st Option
  for( var i min_, k 1; i < max_; i += inc_, k++){
    obj_.options[k] = new Option( i, i);
  }
}
//--------------
function Ajout(){
  //-- Recup SELECT et choix
  var O_Select = document.getElementById('liste');
  var Choix    = O_Select.selectedIndex;
  //-- Quitte si 1st ligne
  if( Choix < 1) return;
  //-- Recup data ligne select
  var szTmp    = O_Select.options[Choix].text;
  var Tab      = szTmp.split("|");

  //-- Recup Objet Parent pour insertion
  var O_Parent = window.opener ? window.opener.document : window.document;
  var O_Table  = O_Parent.getElementById('table');
  //-- Creation de la ligne
  var RowNum = O_Table.rows.length;   // Get index pour les IDs
  var O_Row  = O_Table.insertRow(-1);
  //-- Creation des cellules
  var O_Col = [];
  for( var i = 0; i < 6; i ++){
    O_Col[i] = O_Row.insertCell( -1);
  }

  //-- CREATION des Champs
  var Obj;
  var Ind = 0;     //-- index pour les O_Col de appendChild
  //-- Creation INPUT et Ajout
  Obj = O_Parent.createElement( 'INPUT');
  O_Col[Ind++].appendChild( Obj);
  //-- Initialisation diverses
  Obj.id Obj.name 'reference_' +RowNum;
  Obj.type = "text";
  Obj.size = '12';
  Obj.value = Tab[ REFERENCE];

  //-- Creation INPUT et Ajout
  Obj = O_Parent.createElement( 'INPUT');
  O_Col[Ind++].appendChild( Obj);
  //-- Initialisation diverses
  Obj.id Obj.name 'designation_' +RowNum;
  Obj.type = "text";
  Obj.size = '30';
  Obj.value = Tab[ DESIGNATION];

  //-- Creation SELECT et Ajout
  Obj = O_Parent.createElement( 'SELECT');
  O_Col[Ind++].appendChild( Obj);
  //-- Creation des Options
  Ajout_Option( Obj, 1, 100, 1);
  //-- Initialisation diverses
  Obj.id Obj.name 'qte_' +RowNum;
  Obj.onchange = function(){ Fct_Select( this);};

  //-- Creation INPUT et Ajout
  Obj = O_Parent.createElement( 'INPUT');
  O_Col[Ind++].appendChild( Obj);
  //-- Initialisation diverses
  Obj.id Obj.name 'puht_' +RowNum;
  Obj.type = "text";
  Obj.size = 6;
  Obj.value = Tab[ PRIX];

  //-- Select Remise
  Obj = O_Parent.createElement( 'SELECT');
  O_Col[Ind++].appendChild( Obj);
  //-- Creation des Options
  Ajout_Option( Obj, 0, 100, 5);
  //-- Initialisation diverses
  Obj.id Obj.name 'remise_' +RowNum;
  Obj.onchange = function(){ Fct_Select( this, 'val_remise_');};

  //-- Creation INPUT et Ajout
  Obj = O_Parent.createElement( 'INPUT');
  O_Col[Ind++].appendChild( Obj);
  //-- Initialisation diverses
  Obj.id  Obj.name 'val_remise_' +RowNum;
  Obj.type = "text";
  Obj.readOnly = "readonly";
  Obj.size = 4;
}
</script>
</head>

<form action="">

  <select name="liste" id="liste" onchange="Ajout()" >
    <option value="" >-- Sélectionnez un Produit --</option>
    <option value="ID_0">Reference_0 |Designation_0 |  9.99</option>
    <option value="ID_1">Reference_1 |Designation_1 |155.5</option>
    <option value="ID_2">Reference_2 |Designation_2 |145.5</option>
    <option value="ID_3">Reference_3 |Designation_3 |100.5</option>
    <option value="ID_4">Reference_4 |Designation_4 |200.0</option>
  </select>
</form>
reference_ |
designation_ |
qte_ |
puht_ |
remise_ |
val_remise |

</html>

Bonne continuation...
;O)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
13 sept. 2010 à 14:29
Bonjour PetoleTeam,
Encore mille fois merci pour te pencher sur mon problème avec autant d'attention.
J'ai appliqué le code et constaté les améliorations.J'ai un souci concernant la recupération de la remise.
Lorsque je sélectionne la remise dans la liste, le champ val_remise_ ne reçoit rien.J'ai modifié la ligne suivante dans la fonction Fct_Select

document.getElementById( dest_ +RowNum).value = Val;
en
document.getElementById('dest_ +RowNum').value = Val; mais sans succès

Please aidez moi!
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
13 sept. 2010 à 19:03
Bonjour,
Lorsque je sélectionne la remise dans la liste, le champ val_remise_ ne reçoit rien.
ceci est normal en l'état. Je rappelles que ce que j'ai mis est un exemple mais que compte tenu du contexte...on y reviens plus loin.

J'ai modifié la ligne suivante dans la fonction Fct_Select
mauvaise modification, tout ce qui est en cote est considéré comme une chaine de caractère ! donc laisser
document.getElementById( dest_ +RowNum).value =  Val; 


Une fonction n'existe et ne vie que dans le contexte ou elle a été crée, en clair si la fonction est crée dans la page index.html elle existe et vie dans la page index.html et toutes références à un objet quelconque sans aucune précision doit appartenir à ce même contexte, même page.
C'est ce qui fait que lorsque l'on inclus un fichier de fonctions JS dans plusieurs pages chacunes des fonctions appartient EXCLUSIVEMENT à la page qui l'a crée, sinon bonjour le bo..n...

C'est finalement peut être pas plus clair d'ailleurs!

En d'autres termes une fois les SELECTs crées dans la page, contenant le formulaire, tu appelles sur le onchange de ceux ci une fonction crée dans la popup d'ou le problème.

OUI mais comment faire????
Plusieurs solutions à cela
- faire un appel à la fonction de la popup, oui mais si elle est fermée ça plantera, pas top...
- faire appel à la même fonction mais dans la page appelante, cela me parait pas mal.

OUI mais comment mettre en oeuvre????
- il te faut, est c'est préférable quoiqu'il arrive, créer un fichier JS externe, par exemple fonctions.js.
- il te faut inclure ce fichier dans la page contenant le formulaire comme indiqué ci dessous, le fichier étant dans le même répertoire que la page HTML
<script type ="text/javascript" src= "fonction.js"></script>

- modifier l'appel de la fonction depuis la page popup comme ceci
onchange="window.opener.Ajout( this)"
on voit que dans ce cas on a ajouté window.opener , c'est simplement pour dire ou il faut aller chercher la fonction et le paramètre this, c'est pour connaitre l'objet à analyser qui n'existe pas dans la page d'origine de la fonction.
- il te faut également corriger l'entête de la fonction pour tenir compte du nouveau paramètre reçu...
//--------------------
function Ajout( this_){
  //-- Recup SELECT et choix
  var O_Select  = this_; // MODIF ICI document.getElementById('liste');
  var Choix    = O_Select.selectedIndex;


Et la tout devrait baigner....
mais j'ai peut être oublier quelque chose...
;O)

PS : visiblement tu n'as pas trouvé le balisage de code !
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
14 sept. 2010 à 16:02
Bonsoir PetoleTeam,
merci pour la solution!
Lorsque j'inclus le fichier des fonctions dans le formulaire, je n'ai pas de réaction mais lorsque je copie son contenu dans mon formulaire alors ça marche 5/5.
J'ai ajouté 2 autres champs(tva/produit et ttc/produit)car mon but est de calculer automatiquement le montant d'un devis .
Pour se faire j'ai inséré un code dans la fonction Fct_Select qui calcule et renseigne automatiquement les champs tva/produit, ttc/produit, total_ht(le total hors taxe de la facture), la tva(tva de la facture), total_ttc(le total ttc) après la selection de la remise.
Problème:
Les champs total_ht(le total hors taxe de la facture), la tva(tva de la facture), total_ttc(le total ttc) reçoivent les valeurs de la dernière ligne de la facture.
voici donc le code:
function Fct_Select( this_, dest_){
var Obj = this_;
//-- Recup de la TR parent dans la TABLE
while(( Obj = Obj.parentNode).tagName !== "TR"){}
//-- Recup numero ligne
var num = Obj.rowIndex;
//-- recup Valeur
var Val = parseFloat( this_.options[this_.selectedIndex].value);
//-- Message pour DEBUG
var szMsg = 'Nous sommes sur la ligne -> ' +num;
szMsg +'\nValeur du SELECT(' +this_.id +') ' +Val;
alert( szMsg);
//-- Si dest_ en parametre alors affectation valeur
if( dest_ != null){
document.getElementById(dest_ +num).value = Val;
//-- Replace sur ligne 0
this_.selectedIndex = 0;

[b]var val_qte = document.getElementById('qte_' +num).value;
var val_puht = parseFloat(document.getElementById('puht_' +num).value);
var val_remise = document.getElementById('val_remise_' +num).value;
var val_thtva = val_puht* val_qte* (1- (val_remise/100));
alert(val_thtva);
var val_tva_produit = val_thtva * 0.18;
alert(val_tva_produit);
document.getElementById('tva_produit_' +num).value= val_tva_produit;
var val_ttc_produit = val_thtva + val_tva_produit;
alert(val_ttc_produit);
document.getElementById('ttc_produit_' +num).value = val_ttc_produit;

var val_total_puht = 0;
val_total_puht = val_total_puht + val_puht* val_qte ;
alert(val_total_puht );

var val_total_remise = 0;
var mont_remis = val_puht*val_qte* (val_remise/100);
val_total_remise = val_total_remise + mont_remis;
alert(val_total_remise );
//var val_total_ht = 0;
var val_total_ht = val_total_puht - val_total_remise ;
alert(val_total_ht);
document.getElementById('total_ht').value = val_total_ht;
var val_tva_fact = val_total_ht * 0.18;
alert(val_tva_fact);
document.getElementById('tva').value = val_tva_fact;
var val_net document.getElementById('net_a_payer').value val_total_ht + val_tva_fact; /b
}



}
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 sept. 2010 à 18:31
Bonjour,[i]
Lorsque j'inclus le fichier des fonctions dans le formulaire, je n'ai pas de réaction mais lorsque je copie son contenu dans mon formulaire alors ça marche 5/5./i
c'est que tu as mal fait quelque chose
- un fichier JS ne contient QUE du CODE, pas de balises <script></script>
- bien vérifier l'emplacement de celui ci par rapport au document qui l'appelle

Concernant l'implantation du code supplémentaire dans la fonction Fct_Select, il n'est pas judicieux, il est préférable de créer une fonction à part pour le calcul total, fonction que tu appeleras en fin de la fonction Fct_Select, surtout que tu as mal placé l'accolade fermant
if( dest_ != null){ 


Maintenant il y a une considération à prendre en compte importante!
Il existe un calcul en ligne et un calcul en colonne
- pour chaque ligne il te faut faire le calcul en fonction des données disponibles.
- pour le total il te faut faire le calcul de tous les résultats significatifs de tes lignes.

=> création d'une fonction de calcul par ligne, ou encore une seul fonction avec une boucle parcourant toutes les lignes du tableau, au choix.

Il est à noter qu'il est impératif de faire des tests sur les valeurs afin de ne pas faire des opération sur des données de nature différentes, et quoiqu'il arrive il faudra les refaire coté serveur.


;O)
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
15 sept. 2010 à 18:56
Bonsoir,
Je vais y travailler et te donner une suite.

merci
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
16 sept. 2010 à 19:12
Bonsoir PetoleTeam,
Je suis à même de faire les calculs par lignes et les totaux.je vais maintenant essayer de récupérer les champs pour les insérer dans la base de données.Voilà le code:

//recupération des variables qté, prix, remise
var val_qte = document.getElementById('qte_' +num).value;
var val_puht = parseFloat(document.getElementById('puht_' +num).value);
var val_remise = document.getElementById('val_remise_' +num).value;
//calcul du total hors tva
var val_thtva = val_puht* val_qte* (1- (val_remise/100));
//affectation de la somme des totaux
val_thtva1 += val_thtva;
// tva par produit et affectation
var val_tva_produit = val_thtva * 0.18;
document.getElementById('tva_produit_' +num).value= val_tva_produit;
//ttc par produit et affectation
var val_ttc_produit = val_thtva + val_tva_produit;
document.getElementById('ttc_produit_' +num).value = val_ttc_produit;
//recupération et affectation de la somme des totaux
var val_total_ht = 0;
val_total_ht += val_thtva1;
document.getElementById('total_ht').value = val_total_ht;
//tva de la facture et affectation
var val_tva_fact = val_total_ht * 0.18;
document.getElementById('tva').value = val_tva_fact;
//ttc de la facture et affectation
var val_net document.getElementById('net_a_payer').value val_total_ht + val_tva_fact;

ps:
var val_thtva1 = 0; est inscrit hors de la fonction Fct_select.
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
19 sept. 2010 à 13:53
Bonjour PetoleTeam,

Pour recupérer les champs de mon formulaire afin de les insérer dans la base, j'ai ajouté dans la fonction Fct_Select
function Fct_Select( this_, dest_){
var Obj = this_;
//-- Recup de la TR parent dans la TABLE
while(( Obj = Obj.parentNode).tagName !== "TR"){}
//-- Recup numero ligne
var num = Obj.rowIndex;
//-- recup Valeur
var Val = parseFloat( this_.options[this_.selectedIndex].value);
window.document.getElementById(qte).value += val+';';

//-- Message pour DEBUG
var szMsg = 'Nous sommes sur la ligne -> ' +num;
szMsg +'\nValeur du SELECT(' +this_.id +') ' +Val;
alert( szMsg);
//-- Si dest_ en parametre alors affectation valeur
if( dest_ != null){
document.getElementById(dest_ +num).value = Val;
//-- Replace sur ligne 0
this_.selectedIndex = 0;


et dans le formulaire
L'objectif est de séparer les différentes quantités par un point virgule(fonction Fct_Select) et les rassembler dans un champ caché(formulaire) pour ensuite les recupérer avec php.mais hélas ça ne marche pas.Une idée?

Merci d'avance
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
19 sept. 2010 à 15:02
Bonjour,
je pense qu'il serait souhaitable de créer un nouveau message pour que d'autres intervenants viennent partager ton problème...
quoiqu'il arrive j'ai écrit par avant
...et quoiqu'il arrive il faudra les refaire coté serveur....
donc pourquoi vouloir les transmettre ????

;O)
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
20 sept. 2010 à 10:09
Bonjour,
Les variables qte_+num, puht_+num, tva_produit_ +num, ttc_produit_+num sont définies et manipulées dans une fonction javascript. Pour calculer côté serveur 2 lignes de devis par exemple il faudra les recupérer sous php afin de les traiter.
ma question est: Dois je considérer les mêmes variables citées plus haut dans php?
0
patingfree Messages postés 48 Date d'inscription vendredi 13 novembre 2009 Statut Membre Dernière intervention 30 septembre 2010
24 sept. 2010 à 10:30
Bonjour PetoleTeam,
Merci infiniment pour ton aide précieuse.j'ai fini l'étape de la recupération et insertion des données dans la base.Je suis entrain de générer le pdf de mon devis.

merci
0
Rejoignez-nous