Champ d'un formulaire alimenté par une liste de choix [Résolu]

Signaler
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010
-
jeremili
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010
-
Bonjour,

Je voudrais créer un formulaire avec des champs pouvant être alimentés par une pop-up contenant des données issues d'une table.

ex:
En face de chaque champ il y aurait une loupe, si je clique sur la loupe une pop-up s'ouvre, celle-ci contient des données issues d'une table et si je clique sur une donnée celle ci alimente le champ du formulaire.

J'aurais voulu savoir quel langage utiliser et notamment savoir s'il est possible de le faire en javascript et PHP et si oui auriez vous quelque exemple.

Merci d'avance

Cdt

Jérémy

26 réponses

Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Évidement puisque ta fonction est faite pour retourner le innerHTML de l'élément ayant l'ID test. Tu es sûr que cela ne fonctionne pas ? :
function Reporter(tn) 
{
var test_cod=tn.innerHTML;	
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
}




JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Bonjour,

Je n'ai pas d'exemple pour toi, malheureusement, mais je peux te donner quelques pistes. Pour modifier un champ de formulaire, on utilise la propriété value

Pour modifier la page d'un popup, on utilise window.opener


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Bonsoir,

J'ai réussi à faire a peu près ce que je souhaitais.

En face de mon champ text j'ai un lien qui ouvre un pop-up,dans ce pop-up j'ai une liste déroulante alimentée par une base de données et lorsque je clique sur une valeur de la liste déroulante, celle-ci est reportée dans le champ text de la fenêtre "mère".

Maintenant ce que je voudrais, au lieu d'avoir une liste déroulante dans mon pop-up je voudrais une liste (tableau), que chaque ligne soit cliquable et que lorsque je clique sur une ligne celle ci soit reporté dans le champ de la fenêtre mère.

Voici le code de mon pop-up (qui fonctionne) avec la liste déroulante:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function Reporter(l) 
{
var cencpt_cod=l.options[l.options.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}
</script>

</head>



<?php
include ("connect.php");
?>

<form name='report'>
   <select onChange="Reporter(this)">
<?php
if($cod==""){
echo('<option value="'.'">'.'Choisir'.'</option>');
}
else
{
echo('<option value="'.'">'.'</option>');}
$SQL = "SELECT * FROM TEST";
$res = mysql_query($SQL);
while($val=mysql_fetch_array($res)) {
echo "<option>".$val["COD"]. ' - '.$val["LIB"]."</option>\n";
}
?>
   </select>



</form>

<!-- [javascript:window.close() Fermer la pop-up]  (lien pour fermer la pop-up mauellement) -->

<?php
include ("disconnect.php");
?>



</html>


Et voici mon code avec la liste (tableau) que je n'arrive pas a faire fonctionner:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function Reporter(l) 
{
var cencpt_cod=l.options[l.options.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}
</script>

</head>



<?php
include ("connect.php");
?>

<form name='report'>
 
<?php


$SQL = "SELECT COD,LIB FROM TEST";
$res = mysql_query($SQL);
while($row=mysql_fetch_row($res)) 
{

$Cod = $row[0];
$Lib = $row[1];


?>
<tr>
<td>[javascript:Reporter(this) <?php echo $Cod ?>]</td>
<td><?php echo $Lib ?></td>


</tr>

<?php
}
?>
  

</form>

<?php
include ("disconnect.php");
?>




Lorsque je clique sur une ligne la fonction Reporter semble ne pas être appelée et la valeur n'est pas reportée dans la fenêtre mère.

Merci d'avance pour votre aide

Cdt

Jérémy
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
function Reporter(l) 
{
var cencpt_cod=l.options[l.options.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}


Tu ne peux pas mettre 1 comme nom de variable. Cela ne respecte pas les règles. Remplace le plutôt par un nom comme "element" ou plus simplement "a" ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Bonjour,

Je viens de remplacer "1" par "element" afin de respecter au mieux les règles, cependant cela ne modifie pas le comportement et ne résout pas mon problème.

Malgré le peu de connaissance que j'ai en prog, je soupçonne que le problème vienne de l'affectation de valeur à la variable test_cod et notamment le selectIndex

function Reporter(element) 
{
var test_cod=element.options[element.options.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}


car dans le cas d'une liste (tableau) il n'y a pas de select dans le formulaire.

Quelqu'un aurait une idée?

Merci

Cdt

Jérémy
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
En effet, il me semble qu'il suffit de mettre element.selectedIndex et non element.options.selectedIndex


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Cela ne change toujours rien....
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Mais que te retourne la console d'erreur ????


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
En passant, dans ton code, je ne trouve pas le formulaire "test" ni l'élément "test_cod" ... Est-ce que je pourrais voir le code au complet ?


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Bonjour JDMCreator,

Avant tout je te remercie du temps que tu consacre a mon pb.

Sinon voici le code complet en 3 fichiers:

Le premier fichier index.php (formulaire)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title>TEST</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <script type="text/javascript" src="open_popup_test.js"></script>
</head>

<?php
mysql_connect(localhost, root, root) or die('Connexion au serveur impossible !
');
mysql_select_db(test2) or die('Connexion impossible à la base
');
?>

<form name='test'>
TEST:
   	
[javascript:open_popup_test() Ouverture popup]



<?php
mysql_close();
?>
  

</html>


Puis le fichier contenant la fonct° javascript nommée open_popup_test.js:

function open_popup_test()
{
window.open("popup_test.php", "TEST", "toolbar=yes, status=yes, scrollbars=yes, resizable=no, width=300, height=300");
}


Puis la pop-up nommée popup_test.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function Reporter(element) 
{
var test_cod=element.[element.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}
</script>

</head>



<?php
mysql_connect(localhost, root, root) or die('Connexion au serveur impossible !
');
mysql_select_db(test2) or die('Connexion impossible à la base
');
?>

<form name='report'>
<?php
$SQL = "SELECT COD,LIB FROM TEST";
$res = mysql_query($SQL);
while($row=mysql_fetch_row($res)) 
{
$cod = $row[0];
$lib = $row[1];
?>
<?php echo $cod ?>,
<?php echo $lib ?>
 

<?php
}
?>
</form>

<?php
mysql_close();
?>

</html>


Et si tu veux voici le script de schéma Mysql:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

CREATE TABLE IF NOT EXISTS `test` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `COD` varchar(5) COLLATE utf8_unicode_ci NOT NULL,
  `LIB` varchar(40) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`ID`),
  UNIQUE KEY `ID` (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;

-- Contenu de la table `test`

INSERT INTO `test` (`ID`, `COD`, `LIB`) VALUES
(1, '1111', 'TEST1'),
(2, '2222', 'TEST2'),
(3, '3333', 'TEST3'),
(4, '4444', 'TEST4');


Avec ce code lorsque je clique sur une valeur de la pop-up il ne se passe rien, alors que si je met le code suivant dans le fichier popup_test.php c'est OK:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function Reporter(element) 
{
var test_cod=element.options[element.options.selectedIndex].value;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;
window.close();
}
</script>

</head>



<?php
mysql_connect(localhost, root, root) or die('Connexion au serveur impossible !
');
mysql_select_db(test2) or die('Connexion impossible à la base
');
?>

<form name='report'>
   <select onChange="Reporter(this)">
<?php
if($cod==""){
echo('<option value="'.'">'.'Choisir'.'</option>');
}
else
{
echo('<option value="'.'">'.'</option>');}
$SQL = "SELECT COD,LIB FROM TEST";
$res = mysql_query($SQL);
while($val=mysql_fetch_array($res)) {
echo "<option>".$val["COD"]. ' - '.$val["LIB"]."</option>\n";
}
?>
   </select>



</form>
<?php
mysql_close();
?>



</html>


Merci d'avance pour ton aide et bonne année.

Cdt

Jérémy
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Attention pour que cela fonctionne avec la liste déroulante il faut mettre ajouter options dans la fonction js.

var test_cod=element.options[element.options.selectedIndex].value;
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Je n'ai pas cherché longtemps, mais la variable element ne semble pas être définie. l'est-elle ? Elle devrait être quelque chose du genre

element=document.getElementsByTagName("select")[0];


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Effectivement la variable element n'est pas définie mais meme en ajoutant ce que tu m'as dis cela ne fonctionne pas j'ai aussi essayé avec

var test_cod=document.getElementsByTagName("table");

mais ca me met [object HTMLCollection] dans le champ du formulaire au lieu du code selectionné
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
C'est normal.

document.getElementsByTagName("table") ne retourne pas un élément HTML, mais un tableau d'élément. Il faut donc le traiter comme Array

document.getElementsByTagName("table")[0]


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Je ne m'en sors vraiment pas...

Si je mets cela:

var test_cod=document.getElementsByTagName("table")[0];


J'obtiens ça dans mon formulaire: [object HTMLTableElement].

N'y a t-il pas une autre méthode pour générer un tableau cliquable à partir d'une requête sql et pouvoir récupérer la valeur dans une variable?

Cdt

Jérémy
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Et voilà, tu es dans le droit chemin ^^

Tu as donc un élément tableau. Maintenant que souhaites-tu afficher dans le champ de formulaire ?

Personellement, je ne connais pas SQL


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Je souhaites afficher le code sur lequel je clique.

Voici en pièce jointe ce que je souhaite obtenir.

Lorsque que je clique sur un des codes je souhaite que ce code soit reporter dans le champ du formulaire.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Quelque chose de ce genre ?
313100000001





JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
15
Date d'inscription
dimanche 22 novembre 2009
Statut
Membre
Dernière intervention
18 février 2010

Yes...... c'est presque cela

J'ai replacé 313100000001 par ma variable PHP

<?php echo $cod ?>


Cependant je souhaite que lorsque je clique sur le code cela exécute ma fonction et non pas ouvrir une box d'alerte mais je ne sais pas trop quoi mettre dedans, pour ne pas dire pas du tout:

function Reporter() 
{
var test_cod=this.innerHTML;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;

}


Il faudrait que la variable test_cod prenne la valeur sur laquelle j'ai cliqué.

Cdt

Jérémy
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Essaye cela

function Reporter(tn) 
{
var test_cod=tn.innerHTML;
window.opener.document.forms["test"].elements["test_cod"].value=test_cod;

}


et dans l'appel

<?php echo $cod ?>


Est-ce que cela fonctionne ?

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
1 2