Petit problème avec des boutons radio

Marsh Posté le 05-01-2010 à 11:23:28

Bonjour,

J'ai fait un petit formulaire (sous forme de tableau) :

Quand on clique sur une ligne du tableau, ça coche le bouton radio correspondant et ça appelle une fonction javascript qui va permettre de changer le style de la ligne sélectionnée (cette ligne change de couleur).

Par défaut j'ai indiqué de cocher la 1ère ligne du tableau. Par défaut cette 1ère ligne est colorée (pour indiquer qu'elle est sélectionnée).
Le problème c'est que par exemple, lorsque je coche le bouton radio de la 2ème ligne et que j'actualise ensuite ma page, la 1ère ligne est colorée mais le bouton radio reste coché sur la 2ème ligne ... du coup ça fait pas top :heink: !

Si vous avez des idées, n'hésitez pas !

Merci !

Message édité par Magg27 le 05-01-2010 à 11:24:40

Reply

Marsh Posté le 05-01-2010 à 11:23:28

Reply

Marsh Posté le 05-01-2010 à 12:08:02

poste nous ton code [code][/ code]

Reply

Marsh Posté le 05-01-2010 à 14:13:38

Code :

<table>
<?php for($j=1;$j<=$i;$j++)
{
(Je vous passe le traitement PHP................)
<tr name="trselect" onclick="select(this,<?php echo $Product_Id; ?> );" <?php if($j==1) { ?> class="police_table2" <?php } else { ?>class="police_table"<?php } ?><td><input name="radio" type="radio" value="<?php echo $Product_Id; ?>" <?php if($j==1) { ?> checked <?php } ?> /></td>
<td><?php echo $Solution_Type; ?></td>
<td><?php echo $Product_Designation; ?></td>
<td><?php echo $Product_Version; ?></td>
<td><?php echo $Product_License; ?></td>
</tr>
<?php
}
?>
</table>

et voilà pour la fonction JS select :

Code :

function select(tr,idradio)
{
if (tr.className!="police_table2" )
{
var lestr = document.getElementsByName("trselect" );
for (i=0; i<lestr.length; i++)
{
if (lestr[i].className=="police_table2" )
{
lestr[i].className="police_table";
}
}
tr.className="police_table2";
var LesRadios = document.getElementsByName("radio" );
for (i=0; i<LesRadios.length; i++)
{
if (LesRadios[i].value==idradio)
{
LesRadios[i].checked=true;
}
}
}
}

Message édité par Magg27 le 05-01-2010 à 15:32:21

Reply

Marsh Posté le 05-01-2010 à 15:06:04

pour commencer, qques remarques:

Code :

<input name="radio" type="radio" value="<?php echo $Product_Id; ?>" <?php if($j==1) { ?> checked <?php } ?>

c'est pas terrible le checked comme ca, et ta balise input n'est pas fermée:

Code :

<input name="radio" type="radio" value="<?php echo $Product_Id; ?>" <?php if($j==1) { ?> checked="checked" <?php } ?> />

ensuite, tu fais un "if($j==1)" pour savoir si tu dois checker ou pas, ca me parait bizarre... je vois pas comment tu veux qu'une autre ligne soit checkée...

enfin, essaie de travailler avec des id plutot que des name en JS, ca t'évitera de faire des boucles for pas top...

Message édité par pataluc le 05-01-2010 à 15:08:32

Reply

Marsh Posté le 05-01-2010 à 15:29:32

Dsl la balise input était bien fermée, j'ai dû le supprimer sans faire gaffe en mettant le code dans mon post ...
En fait la variable $j est un compteur de ligne et la valeur maximale de $j (c'est-à-dire $i) correspond au nombre total de ligne. Par défaut je veux checker la 1ère ligne donc, logiquement, quand $j=1 je suis sûr checker la première ligne ...

Citation :

je vois pas comment tu veux qu'une autre ligne soit checkée...

C'est-à-dire ? On peut très bien checker une autre ligne : le $j==1 c'est juste pour imposer une ligne coché à l'utilisateur et dans ce cas par défaut c'est la première ligne.

D'accord avec toi pour la qualité de mon JS ! Je débute dans ce domaine alors je connais pas encore toutes les combines .. Merci du conseil !

Message édité par Magg27 le 05-01-2010 à 15:34:04

Reply

Marsh Posté le 05-01-2010 à 17:14:07

Sinon pour mon problème du début, que l'on peut simplifier avec ce code tout bête :

Code :

<html>
<body>
<form method="POST">
<input type="radio" name="radio" checked> 1
<input type="radio" name="radio"> 2
<input type="radio" name="radio"> 3
<input type="radio" name="radio"> 4
<input type="radio" name="radio"> 5
</form>
</body>
</html>

J'aimerais que lorsque l'on actualise la page web contenant ce code, ça soit toujours le radio 1 qui soit checké. Or, si on check le bouton 2 et puis que l'on actualise la page, c'est la bouton 2 qui reste checké ...

Une idée ?

Reply

Marsh Posté le 05-01-2010 à 18:21:54

ca vient du cache du navigateur. tu dois pouvoir ajouter une fonction JS sur le onload pour repasser sur tous les boutons radio et les cocher ou les décocher en fonction de ce qu'ils sont sensé être...

Reply

Marsh Posté le 06-01-2010 à 10:27:12

OK Merci beaucoup pataluc ! C'est bien vu !
En soit ça me dérange pas que le même bouton radio reste coché après l'actualisation de la page. J'aimerais surtout que le style css de la ligne sélectionnée soit appliqué (je rappelle que le style css de la ligne change lorsque celle-ci est sélectionnée). Pour cela j'ai pensé à mettre ce script JS :

Code :

<script type="text/javascript">
var LesRadios = document.getElementsByName("radio" );
for (i=0; i<LesRadios.length; i++)
{
if (LesRadios[i].checked)
{
idtr = LesRadios[i].id;
idtr = "trselect"+idtr;
document.getElementById(idtr).className="police_table2";
}
}
</script>

qui, au chargement de la page, va permettre de rechercher les boutons radios sélectionnés. Lorsque le bouton radio est trouvé, il récupère l'id du bouton qui va permettre de créer l'id du tr (j'ai ajouté un id pour le tr sous la forme id="trselect + id du bouton radio" ) et logiquement avec un document.getElementById(idtr).className, on peut changer le style du tr. Mais ça ne fonctionne pas ... Le script s'exécute bien pourtant ?

Avez-vous une idée ?

Message édité par Magg27 le 06-01-2010 à 10:28:46

Reply

Marsh Posté le 06-01-2010 à 10:31:25

En fait ça marche, il fallait juste mettre le script à la fin ... Quand je vous dis que je suis un as du JS ...

Merci encore pataluc !

Message édité par Magg27 le 06-01-2010 à 10:31:38

Reply

Petit problème avec des boutons radio

Sujets relatifs:

Leave a Replay