11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Champ formulaire alimenté par une liste de choix d'un pop-up

Bonjour,

voici mon probleme:

J'ai un formulaire avec un champ TEXT, 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".POur cela c'est Ok par contre 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.

J'ai bien mon tableau constitué a partir d'une requete sql, le code de chaque ligne est cliquable cependant la valeur sur laquelle je clic n'est pas reportée dans le formulaire de la page mère.

voici mon code complet en 3 fichiers:

Le premier fichier nommé 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>
<body>
<?php
mysql_connect(localhost, root, root) or die('<h1>Connexion au serveur impossible !</h1>');
mysql_select_db(test2) or die('<h1>Connexion impossible à la base</h1>');
?>
 
<form name='test'>
	TEST:
   	<input type="text" name="test_cod">
		<a href="javascript:open_popup_test()">Ouverture popup</a><br><br>
 
<?php
mysql_close();
?>
  </body>
 
</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>
 
<body>
	
<?php
mysql_connect(localhost, root, root) or die('<h1>Connexion au serveur impossible !</h1>');
mysql_select_db(test2) or die('<h1>Connexion impossible à la base</h1>');
?>
 
<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];
?>
<table>
	<tr>
	<td><a href="javascript:Reporter(this)"><?php echo $cod ?></a></td>
	<td><?php echo $lib ?></td>
	<br />
	</tr>
</table> 
 
<?php
}
?>
</form>
 
<?php
mysql_close();
?>
</body>
</html>


Et si vous voulez 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, ci dessus, 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>
 
<body>
	
<?php
mysql_connect(localhost, root, root) or die('<h1>Connexion au serveur impossible !</h1>');
mysql_select_db(test2) or die('<h1>Connexion impossible à la base</h1>');
?>
 
<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><br><br>
 
</form>
<?php
mysql_close();
?>
 
</body>
 
</html>




Je pense que cela vient de ma fonction javascript du fichier popup_test.php
mais sans savoir où.....

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

Cdt

Jérémy
Modifié par jeremili (06 Jan 2010 - 13:33)
Salut,

a écrit :
var test_cod = element.[element.selectedIndex].value;
Ce code récupère la valeur sélectionnée dans un <select>. Si tu n'utilises plus de <select>, c'est normal que ça ne marche pas.

Tu pourrais remplacer cette ligne par quelque chose comme ça :
var index = 1; // ici l'index, dans la <tr>, de la <td> dont tu veux récupérer le contenu
var test_cod = element.parentNode.getElementsByTagName("td")[[#000]index].innerHTML;
Attention, ça récupèrera tout le contenu de la cellule, y compris les éventuelles balises HTML.
Bonjour,

Ca y est j'ai trouver la solution.

Pour ceux que cela interesse, dans mon tableau j'ai mis cela:

<table>
	<tr>
		<td><span onclick="Reporter(this)" onmouseover="this.style.cursor='pointer'"><?php echo $cod ?></span></td>
		<td><?php echo $lib ?></td>
	</tr>
</table>


et dans ma fonction js:

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


Cdt

Jérémy
Sujet clos
Aller à