Récupérer dans un <td>

Version imprimable

Bonjour à tous!
J'ai un petit problème...

J'ai un calendrier que je fais afficher et sur le clic dans une cellule (<td>), dans laquelle se trouve une date (ex.: 18) je veux faire apparaître ce chiffre dans un <input> que je mettrai en "type=hidden" afin de récupérer, entre autres, cette valeur pour insertion dans une bdd.

Cependant, cela ne me retourne que le chiffre "1", peu importe la case dans laquelle je clique... Avant, ça me retournait toujours "[object]" mais j'ai ajouté .innerHTML ou .innerText et là, ca me retourne toujours "1"...

Bref, voici quelques lignes de code...

Fonction pour ajouter le texte
Code:

1 2 3 4 5 <script language="JavaScript"> function add_it(){ document.cal.jour.value = document.getElementById("day").innerText; } </script>
Dans mon tableau (<table>), mon "echo" va ainsi:
Code:

1 2 3 echo "<td valign=top width=50 height=50 id=day bgcolor=#cccccc onClick=\"javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();\" onBlur=\"style.backgroundColor='#cccccc'; style.Color='#000000';\">".$dayArray['mday']."</td>\n";
Et évidemment, j'ai dessous, mon input qui a comme name="jour"

Code:

<input type="text" name="jour" readonly>

Alors là, j'ai vraiment pas mis bcp de code mais j'espère que vous pourrez m'éclairer sur le pourquoi du "1" qui m'est toujours retourné!!! :)

16/04/2012, 07h32
MaitreKaio

J'aimerais assez voir la tête du HTML généré pour le calendrier, c'est possible ?
16/04/2012, 07h36
andry.aime

Bonjour,

1- Tu dois mettre les valeurs des attributs dans des quotes.
2- Le code html généré nous sera plus utile que ton code php.
3- J'imagine que tu as plusieurs fois l'id "day".

A+.
16/04/2012, 12h01
DoumCSS

Bonjour et merci de vous intéresser à ce sujet!

La page est ici:
http://www.zonevolley.com/calendrier.php

Et, évidemment, tous les <td> ont comme id "day".

Et je peux toujours vous mettre le code complet...

Code:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
define("ADAY", (60*60*24));
$thisYear = date('Y');
 
if ((!isset($_POST['month'])) || (!isset($_POST['year']))) {
	$nowArray = getdate();
	$month = $nowArray['mon'];
	$year = $nowArray['year'];
} else {
	$month = $_POST['month'];
	$year = $_POST['year'];
}
$start = mktime(12,0,0,$month,1,$year);
$firstDayArray = getdate($start);
?>
 
<html>
<head>
<title><?php echo "Calendar: ".$firstDayArray['month']."" . $firstDayArray['year']; ?></title>
 
<script language="JavaScript">
function add_it(){ 
   document.cal.jour.value = document.getElementById("day").innerText;
}
</script>
 
</head>
<script type="text/javascript">
function eventWindow(url){
	event_popupWin = window.open(url, 'event', 'resizable=yes, scrollbars=yes, toolbar=no,width=400,height=400');
	event_popupWin.opener = self;
}
</script>
<body>
<h1>Choix de la Date</h1>
<form name="cal" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="month">
<?php
$months = Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
 
for ($x=1; $x<=count($months); $x++){
        echo "<option value=\"$x\"";
        if ($x == $month){
                echo " selected";
        }
        echo ">".$months[$x-1]."</option>";
}
?>
</select>
<select name="year"> 
<?php 
for ($x=$thisYear; $x<=$thisYear + 1; $x++){ 
        echo "<option"; 
        if ($x == $year){ 
                echo " selected"; 
        } 
        echo ">$x</option>"; 
}
?>
</select>
<input type="submit" name="submit" value="Afficher le mois choisi">
 
<br />
<?php
$days = Array("Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam");
echo "<table border=\"1\" cellpadding=\"3\"><tr>\n";
foreach ($days as $day){
        echo "<td style=\"background-color: #aeaeae; text-align: center; width: 14% \"><strong>$day</strong></td>\n";
}
for ($count=0; $count < (6*7); $count++){
        $dayArray = getdate($start);
        if (($count % 7) == 0){
                if ($dayArray['mon'] != $month){
                        break;
                } else {
                        echo "</tr><tr bgcolor=#cccccc>\n";
                }
        }
        if ($count < $firstDayArray['wday'] || $dayArray['mon'] != $month){
                echo "<td>&nbsp;</td>\n";
        } else {
                                echo "<td valign=top width=50 height=50 id=day bgcolor=#cccccc onClick=\"javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();\" onBlur=\"style.backgroundColor='#cccccc'; style.Color='#000000';\">".$dayArray['mday']."</td>\n";
                $start += ADAY;
        }
}
echo "</tr></table>";
?>
<input type="text" name="jour" readonly>
</form>
</body>
</html>

16/04/2012, 12h12
andry.aime

Citation:

Envoyé par DoumCSS

Et, évidemment, tous les <td> ont comme id "day".

C'est ce qu'il ne faut pas faire. Un id doit être unique. Concatène ton id avec le numéro de ligne pendant la génération de la page et tu passes ensuite cette numéro en paramètre de la fonction js.

A+.
16/04/2012, 12h24
DoumCSS
D'accord mais dans ma fonction js, je fais comment?
Code:

1 2 3 4 5 <script language="JavaScript"> function add_it(){ document.cal.jour.value = document.getElementById("day").innerText; } </script>
Je pourrais faire référence à l'élément cliqué du genre qu'à la place de:
document.getElementById("day").innerText
je mette autre chose du genre:
document.click ... ou je ne sais trop??? lol
16/04/2012, 12h44
andry.aime

Citation:

Envoyé par andry.aime

tu passes ensuite cette numéro en paramètre de la fonction js.

Code:

function add_it(numLigne)...

Hum... Pour le php, je réussis bien mais pour donner les différents numéros dans le js, je vois pas comment... :/

Comme tu peux voir, j'ai réussi à nommer chaque "id" différemment:

Code:

1
2
3
4
<td valign=top width=50 height=50 id=day1 bgcolor=#cccccc onClick="javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();" onBlur="style.backgroundColor='#cccccc'; style.Color='#000000';">1</td>
<td valign=top width=50 height=50 id=day2 bgcolor=#cccccc onClick="javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();" onBlur="style.backgroundColor='#cccccc'; style.Color='#000000';">2</td>
<td valign=top width=50 height=50 id=day3 bgcolor=#cccccc onClick="javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();" onBlur="style.backgroundColor='#cccccc'; style.Color='#000000';">3</td>
<td valign=top width=50 height=50 id=day4 bgcolor=#cccccc onClick="javascript: style.backgroundColor='#cc0000'; style.Color='#ffffff'; add_it();" onBlur="style.backgroundColor='#cccccc'; style.Color='#000000';">4</td>

... Et ainsi de suite... Mais pour le add_it()... ???

16/04/2012, 22h30
DoumCSS
Bon et bien en cherchant un peu, j'ai pu trouver ce que je devais faire. Alors pour ceux à qui ça pourrait servir:

Ma fonction add_it:
Code:

1 2 3 4 5 <script language="JavaScript"> function add_it(clicked_id){ document.cal.jour.value = clicked_id; } </script>
Et pour chaque <td> les "id" se forment comme suit:

Code:

<td id=".$dayArray['mday']." onClick=\"javascript: add_it(this.id);>".$dayArray['mday']."</td>

Et voilà, le tour est joué! :)

Merci andry.aime !! :)