begin process at 2012 05 29 18:11:16
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

lundi 23 août 2010 à 12:07:09 | Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

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="">
<table border="0" >
<tr align="left"><td><font color="#CC3300">Type de produit</font></td>
<td> <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>
</td>
</tr>
<table border="0" align="left" cellspacing="1" cellpadding="0">
<tr>
<td><font color="#CC3300">Reference</font></td>
<td><font color="#CC3300">Designation</font></td>
<td><font color="#CC3300">PUHT</font></td>
</tr>
<tr align="left">
<td align="left">
<input type="hidden" name="ref" id="ref">
<input type ="text" size="15" name="reference" id="reference" >
</td>
<td align="left">
<input type="hidden" name="des" id="des">
<input type ="text" size="30" name="designation" id="designation" >
</td>
<td align="left">
<input type="hidden" name="pu" id="pu">
<input type ="text"size="15" name="puht" id="puht">
</td>
</table>
</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>
<body>
<CENTER><BR><BR>
<FONT SIZE="2" COLOR="navy" face=arial>
<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>
</FONT>
</CENTER>
</BODY></HTML>

mercredi 25 août 2010 à 10:27:16 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

PetoleTeam

Membre Club
Réponse acceptée !
Bonjour,
pas sur d'avoir bien tout saisie, utilises la méthode split des chaines

exemple
Code Javascript :
var szTmp = "1515 Marignan Italie";
var Tab   = szTmp.split(" ");
for( var i = 0, nb = Tab.length; i < nb; i++) 
  alert( Tab[i]);

;O)
mercredi 25 août 2010 à 11:51:51 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

Bonjour petroleteam,
je tiens à te remercier pour avoir pris le temps de te pencher sur mon problème.Mille merci! j'ai trouvé une solution avec l'aide d'un ami et d'un tuto depuis mais j'ai un autre souci
voila la fonction qui m'a permis de resoudre ce problème:

function Reporter(l) {
var list = document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text;
/*alert(list);*/
var long = list.length;
/*alert(long);*/
var delim= list.indexOf(" ",0);
/*alert(delim);*/
var refer = list.substring(0,delim);
/* alert(refer);*/
var suivant = delim+1;
/* alert(suivant);*/
var delimi = list.indexOf(" ",suivant);
/* alert(delimi);*/
var desi1 = list.substring(suivant,delimi);
/*alert(desi1);*/
var suivant = delimi+1;
/*alert(suivant);*/
var delimit = list.indexOf(" ",suivant);
/* alert(delimit);*/
var desi2 = list.substring(suivant,delimit);
/*alert(desi2);*/
var design = desi1+desi2;
/*alert(design);*/
var suivant = delimit+1;
var prix = list.substring(suivant,long);
/* alert(prix);*/

window.opener.document.getElementById('reference').value += refer;
window.opener.document.getElementById('designation').value = desi1+desi2;

window.opener.document.getElementById('puht').value += prix;
/*window.opener.document.getElementById('pu').value +=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value +';';
*/
}

Mon souci actuel est:
je dispose d'un formulaire avec des champs textes et une liste(type de produit) qui ouvre une popup qui contient aussi une liste(reference designation prix) .Lorsque je selectionne une ligne dans la popup, les informations viennent se loger dans les champs textes respectifs sur le formulaire et après le choix de la remise se crée une nouvelle ligne vierge dans le formulaire .Lorsque je selectionne un autre element de la liste du popup, les enregistrements ne se logent pas dans les champs de la deuxième ligne mais plutot la première.
Je voudrais qu'après la selection d'une seconde ligne dans la popup, une autre ligne de champ se crée sur le formulaire avec les enregistrements selectionnés.C'est un véritable souci pour moi car je découvre à peine javascript et je ne sais comment resoudre ce problème.Aidez moi svp , suis en galère!

code du formulaire

//liste du formulaire
<td>
<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('facturation');

$sql = "SELECT * FROM type_produit";
$query = mysql_query($sql);
while($donnees = mysql_fetch_object($query))
{

echo "<option value='".$donnees->id."' onClick=\"OuvrirPopup('/gestion_facturation/proforma/list_pro_serveur.php','liste','widtd=400,height=200,menubar=no,status=no,left=5,top=5')\">".$donnees->appelation."</option>";

}
?>
</select>
</td>

//champ texte du formulaire

<table id = "table" border="0" align="left" cellspacing="1" cellpadding="0">
<tr>
<td><font color="#CC3300">Reference</font></td>
<td><font color="#CC3300">Designation</font></td>
<td><font color="#CC3300">Quantite</font></td>
<td><font color="#CC3300">PUHT</font></td>
<td><font color="#CC3300">Remises</font></td>
<td><font color="#CC3300">Remise</font></td>
<td><font color="#CC3300">Tva/produit</font></td>
<td><font color="#CC3300">Prix TTC/produit</font></td>
</tr>

<tr>
<td><input type ="text" size="12" name="reference" id="reference" ></td>
<td><input type ="text" size="30" name="designation" id="designation" ></td>
<td>
<select name="qte" id="qte"><?php $fin= 1000; echo "<option selected>---</option>";for ($i=1; $i<=$fin; $i++){
echo "<option>$i</option>";
echo "<br/>";
}
?>
</select>
</td>

<td>
<input type ="text"size="16" name="puht" id="puht">
</td>
<td>
<select name="liste_remise" onchange="recupSelection(this, this.form.remise)" >
<?php
$fin= 100;
echo "<option selected>----</option>";
for ($i=0; $i<=$fin; $i +=5){
echo "<option>$i</option>";
echo "<br/>";
}
?>
</select>
<td>
<input type="text" size="3" id ="remise" name="remise" value="" />
</td>
</td>
<td>
<input type ="text" size="16" name="tva_produit" id = "tva_produit">
</td>
<td>
<input type ="text" size="16" name="ttc_produit" id = "ttc_produit">
</td>
</tr>
</table>

//code javascript permettant de créer la ligne sans les enregistrements
<SCRIPT>
function recupSelection(src, dest)

{

var valeur = src.options[src.selectedIndex].value;
if (valeur = '')
return;
dest.value = src.options[src.selectedIndex].value;
src.selectedIndex = 0;

var nouvelign = document.getElementById('table').insertRow(-1);
var newCell = nouvelign.insertCell(0);
newCell.innerHTML = '<input type ="text" size="12" name="reference" id="reference" >';
var newCell = nouvelign.insertCell(1);
newCell.innerHTML = '<input type ="text" size="30" name="designation" id="designation" >';
var newCell = nouvelign.insertCell(2);
newCell.innerHTML = '<select name="qte" id="qte"> <?php $fin= 1000; echo "<option selected>---</option>"; for ($i=1; $i<=$fin; $i++){ echo "<option>$i</option>";echo "<br/>"; } ?> </select>';
var newCell = nouvelign.insertCell(3);
newCell.innerHTML = '<input type ="text" size="16" name="puht" id="puht" >';
var newCell = nouvelign.insertCell(4);
newCell.innerHTML = '<select name="liste_remise" onchange="recupSelection(this, this.form.remise)"> <?php $fin= 100; echo "<option selected>----</option>"; for ($i=0; $i<=$fin; $i +=5){ echo "<option>$i</option>"; echo "<br/>"; } ?> </select>';
var newCell = nouvelign.insertCell(5);
newCell.innerHTML = '<input type="text" size="3" id ="remise" name="remise" value="" />';
var newCell = nouvelign.insertCell(6);
newCell.innerHTML = '<input type ="text" size="16" name="tva_produit" id = "tva_produit">';
var newCell = nouvelign.insertCell(7);
newCell.innerHTML = '<input type ="text" size="16" name="ttc_produit" id = "ttc_produit">';
}
</SCRIPT>

Merci pour votre aide
mercredi 25 août 2010 à 13:54:15 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

PetoleTeam

Membre Club
il ne faut pas oublier de changer les IDs et NAMEs pour pouvoir faire une réelle création, c'est donc à gérer dans la fonction.
un petit exemple pour le principe, pardon un des principes
Code Javascript :
<html>
<head>
<script type="text/javascript">
var Num = 0;  // Num pour gestion Ligne
//--------------
function Ajout(){
  //-- Recup le select
  var O_Liste = document.getElementById('selection');
  //-- Recup la ligne selectionnee
  var Index = O_Liste.selectedIndex;
  //-- Recup le libelle
  var szTmp = O_Liste.options[Index].text; 
  //-- Deploie la chaine
  var Tab = szTmp.split(" "); 
  //-- Recup Objet pour insertion
  var O_Dest  = document.getElementById('insertion');

  //-- Recup objet pour mise a jour  
  var O_Input = new Array();
  O_Input[0] = document.getElementById('champ0_' +Num);
  //-- Si n'existe pas
  if( !O_Input[0]){
    //-- Creation INPUT
    O_Input[0] = document.createElement( 'INPUT');
    //-- Ajout
    O_Dest.appendChild( O_Input[0]);
    //-- Affectation Name et ID
    O_Input[0].id    = 'champ0_' +Num;
    O_Input[0].name  = 'champ0_' +Num;
    //-----------------
    //-- DEUXIEME CHAMP 
    O_Input[1] = document.createElement( 'INPUT');
    //-- Ajout
    O_Dest.appendChild( O_Input[1]);
    //-- Affectation Name et ID
    O_Input[1].id    = 'champ1_' +Num;
    O_Input[1].name  = 'champ1_' +Num;
    //-- Retour ligne juste for plus de clarete
    O_Dest.appendChild( document.createElement('BR'));
    //-- Incrementation pour prochain
    Num ++;    
  }
  //-- Ajout des données
  O_Input[0].value = Tab[0];
  O_Input[1].value = Tab[1];
} 
</script>
</head>
<body>
<select id="selection" name="selection">
  <option>Data_01 001 Ligne_01</option>
  <option>Data_02 002 Ligne_02</option>
  <option>Data_03 003 Ligne_03</option>
  <option>Data_04 004 Ligne_04</option>
</select>
<input type="button" onclick="Ajout();" value ="Ajouter"></input>
<div id = "insertion"></div>
</body>
</html> 

c'est très optimisable, mais c'est pour le principe

PS :
Merci d'utiliser les balises de codage pour plus de lisibilité.

;O)
mercredi 25 août 2010 à 14:10:02 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

Merci encore une fois de m'avoir répondu.J'aimerais poser une question que tu trouveras peut être stupide
le code ci dessous est ce pour le formulaire ou la fenêtre popup? car les lignes contenues dans le select proviennent de la popup
mercredi 25 août 2010 à 14:23:37 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

Je viens de tester le principe et il marche.j'adapte et te donne une suite.
Merci encore
jeudi 26 août 2010 à 11:20:41 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

Bonjour Petrole Team,
J'arrive à inserer les input mais pas les select.
Une idée?
jeudi 26 août 2010 à 13:07:52 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

PetoleTeam

Membre Club
Bonjour,
de la même manière que le reste non...
Mais pourquoi dupliquer les SELECTs?

au fait : PetroleTeam
;O)
jeudi 26 août 2010 à 13:20:33 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

patingfree

Bonjour PetroleTeam,
J'ai deux select avec des codes php.j'ai esssayé ceci et ça ne marche pas.La liste s'affiche mais sans elements.

/-- Recup Objet pour insertion
var O_Dest = window.opener.document.getElementById('table');

//-- Recup objet pour mise a jour
var tab = new Array();
tab[0] = window.opener.document.getElementById('reference_' +num);
//-- Si n'existe pas
if( !tab[0]){
//-----------------
//-- PREMIER CHAMP
//-- Creation INPUT
tab[0] = window.opener.document.createElement( 'INPUT');
//-- Ajout
O_Dest.appendChild( tab[0]);
//-- Affectation Name et ID
tab[0].id = 'reference_' +num; tab[0].name = 'reference_' +num; tab[0].size = '10';

//-- DEUXIEME CHAMP
tab[1] = window.opener.document.createElement( 'INPUT');
//-- Ajout
O_Dest.appendChild( tab[1]);
//-- Affectation Name et ID
tab[1].id = 'designation_' +num; tab[1].name = 'designation_' +num;

//-----------------
//-- TROISIEME CHAMP
tab[2] = window.opener.document.createElement( 'SELECT');
//-- Ajout
O_Dest.appendChild( tab[2]);
//-- Affectation Name et ID
tab[2].id = 'qte_' +num; tab[2].name = 'qte_' +num;

//-- QUATRIEME CHAMP
tab[3] = window.opener.document.createElement( 'INPUT');
//-- Ajout
O_Dest.appendChild( tab[3]);
//-- Affectation Name et ID
tab[3].id = 'pu_' +num; tab[3].name = 'pu_' +num;


//-- Incrementation pour prochain
num ++;
}
//-- Ajout des données
var selec_val = "<?php $fin= 1000; echo "<option selected>---</option>"; for ($i=1; $i<=$fin; $i++){ echo "<option>$i</option>";echo "<br/>"; } ?>";
tab[0].value = refer;
tab[1].value = design;
tab[2].value = selec_val;
tab[3].value = prix;
jeudi 26 août 2010 à 13:32:26 | Re : Remplir plusieurs cases d'un formulaire avec le resultat d'une selection provenant d'une popup

PetoleTeam

Membre Club
pas relue tout le code!
MAIS sur la ligne suivante mettre
tab[2].innerHTML = selec_val;
au lieu de
tab[2].value = selec_val;

Je ne vois plus l'insertion dans une TABLE.

Une autre soluce est de
- cloner la ligne
- l'ajouter
- parcourir les élément pour modifier le ID et NAME

;O)

1 2 3 4

Cette discussion est classée dans : formulaire, liste, document, value, getelementbyid


Répondre à ce message

Sujets en rapport avec ce message

URGENT !! validation formulaire avec php [ par romainst ] Bonjour j'ai un énorme problème que je dois résoudre rapidement c'est pour ça que j'en appelle à votre aide,J'ai créé récemment ce formulaire de vote Problème avec un bouton Submit sous forme d'image [ par titoursdu38 ] Bonjour à tous !Je suis en train de travailler sur un formulaire, et je ne parviens pas à envoyer mon formulaire après le clic sur l'image.J'utilise u Problème Firefox & document.getElementById [ par leviz ] Bonjour,J'ai un problème avec Firefox, il ne me recupère pas les valeurs de mon formulaire et pourtant sous IE ça fonctionne très bien.        alert( problème de formulaire de calcul en ligne [ par adtconsult ] Bonjour, J'ai une page web ou des données sont entrées par l'utilisateur en ligne Qui ressemble à ceci : --------------------------------------------- controler plusieurs champs d'un formulaire [ par attentio ] Bonjour,j'ai une fonction qui verifie tous les champs d'un formulaire qui ne marche pasje ne comprends vraiment pas pourquoi ?si je mets   if(document pb éxécution script [ par bricelo ] Bonjour, j'ai un script js de reconnaissance de code postal qui fonctionne de façon bancal.En effet l'appel de la fonction fonctionne bien et la premi Affiche nombre [ par jumano ] Bonjour,J'effectue une petite fonction en js me permettant d'effectuer certain calcul en fonction de "radio" en position check.Je récupère ensuite une envoi formulaire xmlhttprequest [ par shadow1779 ] Bonjour,j'essai de faire vérifier le contenu d'un formulaire avec xmlhttprequest mais ce coup ci j'ai une petite erreur que je n'arrive pas a comprend Formulaire Dynamique (Ajout, suppression) [ par boudafc ] Bonjour, Voilà, j'essaye de créer un formulaire dynamique avec possibilité d'ajouter ou de supprimer des champs. Pour le moment, je fais mon test sur fonction et document.formulaire.xxxxx.value [ par skalarache ] Bonjour,Alors voila j'ai une fonction javascript qui me permet de récupérer certaines infos sur la validation d'un formulaire.Seulement, pour être uti


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,650 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales