Page 1 sur 1
case a cocher dans un formulaire
Posté : 22 sept. 2010, 16:25
par hdi
bonjour,
je dispose d'une page php contenant un formulaire permettant de réaliser une sélection de joueur selon leur catégorie (jeunes ou seniors)
j 'aimerais à l'ouverture de celle ci que l'utilisateur coche la case jeune ou seniors - et qu'on impose a une variable grace à un if ou autre
que les champs des select liste soient remplis par les noms des jeunes ou seniors selon la case coché
en gros je sais que c'est possible en faisant 2 pages php la premiere choisir jeune ou seniors et valider vers la 2 page du formulaire
Mais Moi j'aimerais que cela s'éffectue seulement dans une page.
merci pour vos conseils et vos remarques
Re: case a cocher dans un formulaire
Posté : 22 sept. 2010, 23:31
par AB
Tu peux faire un truc comme ça :
<?php
if (isset($_POST["envoyer"]))
{
//Région
print_r('sélection = ' .$_POST["selection"]);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_form,id_select)
{
var form_id = document.getElementById(id_form);
var form_select = document.getElementById(id_select);
if(form_id && form_select)
{
var tab = new Array();
//cherche les balises select inlues dans l'id id_form (= categorie dans cet exemple)
tab = form_id.getElementsByTagName('select');
for (i=0; i < tab.length; i++)
{
/* on regarde si l'id est celui qu'on recherche */
if (tab[i].id == id_select)
{
// Met le select en disable à false et le fait afficher
tab[i].disabled = false;
tab[i].style.display = 'inline';
}
else
{
// Met le select en disable à true et le cache
tab[i].disabled = true;
tab[i].style.display = 'none';
}
}
// Affiche le formulaire
form_id.style.display = "block";
}
}
-->
</script>
<style type="text/css">
.categorie {
display:none;
}
</style>
</head>
<body>
<p>
juniors <input type="radio" name = "categorie" value = "juniors" onclick = "Affiche_liste(this.name,this.value)" /> seniors <input type="radio" name = "categorie" value = "seniors" onclick = "Affiche_liste(this.name,this.value)" />
</p>
<div>
<form action = "#" method = "post" class = "categorie" id = "categorie" >
<select name = "selection" id = "juniors" >
<option value = "0">«Choisissez»</option>
<option value = "junior1">junior1</option>
<option value = "junior2">junior2</option>
</select>
<select name = "selection" id = "seniors">
<option value = "0">«Choisissez»</option>
<option value = "senior1">senior1</option>
<option value = "senior2">senior2</option>
<option value = "senior3">senior3</option>
</select>
<input name = "envoyer" value = "envoyer" type = "submit"/>
</form>
</div>
</body>
</html>
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 00:06
par hdi
super ca marche je te remercie d'avance
A+
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 00:50
par AB
Après vérification ça ne fonctionne pas sous IE6 (comme souvent). J'ai indiqué la cause dans les commentaires html du code
Une modif pour que ça fonctionne aussi avec IE6 :
<?php
if (isset($_POST["envoyer"]))
{
//Région
print_r('sélection = ' .$_POST["selection"]);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_form,id_select)
{
var form_id = document.getElementById(id_form);
var form_select = document.getElementById(id_select);
if(form_id && form_select)
{
var tab = new Array();
//cherche les balises select inlues dans l'id id_form (= categorie dans cet exemple)
tab = form_id.getElementsByTagName('select');
for (i=0; i < tab.length; i++)
{
/* on regarde si l'id est celui qu'on recherche */
if (tab[i].id == id_select)
{
// Met le select en disable à false et le fait afficher
tab[i].disabled = false;
tab[i].style.display = 'inline';
}
else
{
// Met le select en disable à true et le cache
tab[i].disabled = true;
tab[i].style.display = 'none';
}
}
// Affiche le formulaire
form_id.style.display = "block";
}
}
-->
</script>
<style type="text/css">
#select form {
display:none;
}
</style>
</head>
<body>
<p>
juniors <input type="radio" name = "choix_option" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
seniors <input type="radio" name = "choix_option" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
</p>
<!-- bug sous IE6 : form_id.getElementsByTagName ne fonctionne plus car l'ancêtre perd la boule si une balise name a la même valeur que l'id qui spécifie la zone de recherche (ici = form_id = categorie)
<p>
juniors <input type="radio" name = "categorie" value = "juniors" onclick = "Affiche_liste(this.name,this.value)" />
seniors <input type="radio" name = "categorie" value = "seniors" onclick = "Affiche_liste(this.name,this.value)" />
</p>
-->
<div id = "select">
<form action = "#" method = "post" id = "categorie" >
<p>
<select name = "selection" id = "juniors">
<option value = "0">«Choisissez»</option>
<option value = "junior1">junior1</option>
<option value = "junior2">junior2</option>
</select>
<select name = "selection" id = "seniors">
<option value = "0">«Choisissez»</option>
<option value = "senior1">senior1</option>
<option value = "senior2">senior2</option>
<option value = "senior3">senior3</option>
</select>
<input name = "envoyer" value = "envoyer" type = "submit"/>
</p>
</form>
</div>
</body>
</html>
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 10:07
par hdi
dans mon cas çà pourrait être plus simple car
l'utilisateur doit choisir entre jeune et senior
sachant que dans
<div>
<?php echo "Joueur $i"?>
<select name="Joueur<?php echo $i; ?>" size="0" tabindex="1" >
<?php
foreach ($source as $value) { ?>
<option value="<?php echo $value; ?>"> <?php echo "$value <br />\n"; ?> </option>
<?php }
?>
</select>
</div>
et il suffirait de faire un test if source = jeune ou senior
car les variables jeunes ou seniors sont des ARRAY
mais ce simple test me contrarie...
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 19:11
par AB
Ben alors si tu veux que les deux listes apparaissent au chargement de ta page, tu fais deux formulaires distincts qui te renverrons soit $_POST['junior'] soit $_POST['seniors'] donc il te suffit de tester l'existence de ces variables avec un simple isset.
Par contre si tu as d'autres valeurs à renvoyer en même temps que cette sélection il ne faut faire qu'un formulaire et là tu seras embêté si le joueur fais une sélection dans un sélect puis change d'avis et en fait une seconde dans l'autre. La solution que je t'ai donnée répond à ce problème.
Ce qu'il y a "d'un peu" compliqué dans le code, c'est le javascript et étant donné qu'il est fait... Il ne te reste plus qu'à lister le nom des joueurs dans les champs "options" avec deux boucles php.
Maintenant , comme je le disais plus haut, s'il n'y a que cette sélection à retourner dans le formulaire et aucune autre donnée, tu peux faire deux formulaires distincts.
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 19:27
par AB
J'y pense, tu peux aussi afficher les deux sélections et ne permettre la sélection de l'une d'entre elle qu'après avoir coché sur un bouton pour éviter les erreurs. Dans ce cas il y a peu de modif à faire dans le code que je t'ai donné :
<?php
if (isset($_POST["envoyer"]))
{
//Région
print_r('sélection = ' .$_POST["selection"]);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_form,id_select)
{
var form_id = document.getElementById(id_form);
var form_select = document.getElementById(id_select);
if(form_id && form_select)
{
var tab = new Array();
//cherche les balises select inlues dans l'id id_form (= categorie dans cet exemple)
tab = form_id.getElementsByTagName('select');
for (i=0; i < tab.length; i++)
{
/* on regarde si l'id est celui qu'on recherche */
if (tab[i].id == id_select)
{
// Met le select en disable à false et le fait afficher
tab[i].disabled = false;
//tab[i].style.display = 'inline';
}
else
{
// Met le select en disable à true et le cache
tab[i].disabled = true;
//tab[i].style.display = 'none';
}
}
// Affiche le formulaire
//form_id.style.display = "block";
}
}
-->
</script>
<style type="text/css">
#select form {
display:block;
}
</style>
</head>
<body>
<p>
juniors <input type="radio" name = "choix_option" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
seniors <input type="radio" name = "choix_option" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
</p>
<div id = "select">
<form action = "#" method = "post" id = "categorie" >
<p>
<select name = "selection" id = "juniors" disabled="disabled">
<option value = "0">«Choisissez»</option>
<option value = "junior1">junior1</option>
<option value = "junior2">junior2</option>
</select>
<select name = "selection" id = "seniors" disabled="disabled">
<option value = "0">«Choisissez»</option>
<option value = "senior1">senior1</option>
<option value = "senior2">senior2</option>
<option value = "senior3">senior3</option>
</select>
<input name = "envoyer" value = "envoyer" type = "submit"/>
</p>
</form>
</div>
</body>
</html>
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 19:37
par hdi
C'est ca maintenant je vais essayer de l'adapter sur le mien
Peux t on cacher les champs non utiliser au lieu qu'ils soient grisées
merci
Re: case a cocher dans un formulaire
Posté : 23 sept. 2010, 19:47
par AB
C'est ca maintenant je vais essayer de l'adapter sur le mien
Peux t on cacher les champs non utiliser au lieu qu'ils soient grisées
merci
Ben c'est ma première formule ! ->
php-avance/case-cocher-dans-formulaire- ... ml#p337266