"précocher" une case sélectionnée pb php/js

Fermé
ClR 555 - 1 févr. 2011 à 17:10
 ClR 555 - 3 févr. 2011 à 11:17
Bonjour bonjour,

je suis en train de créer un petit code php & js, bien que je ne maîtrise pas du tout le js. J'en ai eut besoin pour montrer/cacher une div au clic.

Ce pti module (la div) appartient à un grand formulaire, dont il représente 3 champs : 'no', 'plan', 'clé' (on n'a pas accès, on a le plan, on a les clés...)

Il y a 3 joueurs.
Au départ, personne n'a d'accès.
Au fil du jeu, on obtient le plan ou/et la clé, mais on peut aussi les perdre, comme on peut voir son accès fermer.
Parfois tout le monde a les plans.
Parfois tout le monde a les clés.
Bref c'est aléatoire et ça dépend d'autres paramètres (enregistrés dans une base de données).

En fait je souhaiterais qu'en cliquant sur une des pré-options, mon tableau se remplisse automatiquement. Deux problèmes : d'abord ma div se referme automatiquement, mais pire, rien n'est pré-coché

Je m'y prends mal je pense (voir le code qui suit) ... mais je ne vois pas comment faire autrement.

Pour être plus claire et pour que ceux qui veulent bien me filer un coup de main je mets à la suite le code sur une page, afin que vous puissiez tester (j'ai mit le css en en-tête, pour que ce soit plus jouli-jouli, bien qu'il n'ai rien à voir avec mon pb). Je me dis que ça n'en sera que plus aisé et agréable pour vous.

ça parait long mais ça ne l'est pas quand on y regarde de plus près.

Merci d'avance à tous

<!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="en-GB">
<head>
<style>
#dividnumero1
{
width:300px;
}
table.tableau
{
width:300px;
}
.tableau
{
border:1px solid;
border-collapse:collapse;
text-align:center;
padding:0px;
margin:0px;
}
.tableau .titres_horiz
{
text-align:center;
}
.titres_horiz .acces
{
text-align:center;
padding-top:10px;
border:1px solid;
}
.titres_horiz .option
{
width:120px;
text-align:center;
padding-bottom:10px;
padding-top:10px;
}
.ss_titres_horiz
{
text-align:center;
border-bottom:1px solid;
}
.ss_titres_horiz td
{
width:30px;
text-align:center;
}

.tableau .titres_verti
{
text-align:left;
width:90px;
border-right:1px solid;
border-left:1px solid;
}
.tableau tr.gris
{
background-color:#e3e0e0;
}
.tableau td
{
border-left:1px solid #b8b7b7;
width:30px;
text-align:center;
}
</style>
<!--cacher le div-->
<script type="text/javascript">
function visibilite(thingId)
{
var
targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
}
else
{
targetElement.style.display = "none" ;
}
}
</script>
<title>Test</title>
</head>
<body>

<?php
//choix des options
$acces_en_tete='<p>';
//valeur de case précochée option type
$checked_no='';
$checked_plan='';
$checked_cle='';
$checked_autre='';
//valeur case précochée tableau
$checked='';

if(isset($_POST['options_type_acces']))
{
if(isset($_POST['blop_acces']))
$blop_acces=$_POST['blop_acces'];
else
$blop_acces='';

if(isset($_POST['bang_acces']))
$bang_acces=$_POST['bang_acces'];
else
$bang_acces='';

if(isset($_POST['tim_acces']))
$tim_acces=$_POST['tim_acces'];
else
$tim_acces='';

$options_type_acces=$_POST['options_type_acces'];
//Personne n'a d'accès
if($options_type_acces=='no')
{
$checked_no=' checked="checked" ';
if(($blop_acces=='no')&&($bang_acces=='no')&&($tim_acces=='no'))
{
$checked=' checked="checked" ';
}
}
//tout le monde a accès aux plans
elseif($options_type_acces=='plan')
{
$checked_cle=' checked="checked" ';
if(($blop_acces=='plan')&&($bang_acces=='plan')&&($tim_acces=='plan'))
{
$checked=' checked="checked" ';
}
}
//tout le monde a accès aux clés
elseif($options_type_acces=='cle')
{
$checked_plan=' checked="checked" ';
if(($blop_acces=='cle')&&($bang_acces=='cle')&&($tim_acces=='cle'))
{
$checked=' checked="checked" ';
}
}
//autres (rien n'est précisé)
elseif($options_type_acces=='Autre')
{
$checked_autre=' checked="checked" ';
$checked='';
}
}

//clic et si clic déplie les options sinon par déft tout à NON : pas d'accès
$options='
<a href="javascript:visibilite(\'dividnumero1\');"><strong>Définir les options</strong></a>
<div id="dividnumero1" style="display:none;">
<p>
<strong>Options type :</strong>
<form method="post" action="test_ccm.php" name="options_type_acces">
<br/>
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_no.' name="options_type_acces" value="no"/>
<label for="options_type_acces"> Aucun accès</label>
<br/>
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_plan.' name="options_type_acces" value="cle"/>
<label for="options_type_acces"> Plans</label>
<br/>
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_cle.' name="options_type_acces" value="plan"/>
<label for="options_type_acces"> Clés</label>
<br/>
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_autre.' name="options_type_acces" value="autre"/>
<label for="options_type_acces"> Autre</label>
</form>
</p>
<table class="tableau">
<tr valign="top" class="titres_horiz">
<td colspan=1 rowspan=2 class="acces">
<strong>Accès</strong>
</td>
<td colspan=4 rowspan=1 class="option">
<strong>Options</strong>
</td>
</tr>
<tr class="ss_titres_horiz">
<td colspan=1 rowspan=1>
Aucun accès
</td>
<td colspan=1 rowspan=1>
Plans
</td>
<td colspan=1 rowspan=1>
Clés
</td>
</tr>
<tr class="gris">
<td colspan=1 rowspan=1 class="titres_verti">
<label for="blop_acces">Professeur Blop</label>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="blop_acces" '.$checked.' value="NO"/>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="blop_acces" '.$checked.' value="PLAN"/>

<td colspan=1 rowspan=1>
<input type="radio" name="blop_acces" '.$checked.' value="CLE"/>
</td>
</tr>
<tr>
<td colspan=1 rowspan=1 class="titres_verti">
<label for="bang_acces">Professeur Bang</label>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="bang_acces" '.$checked.' value="NO"/>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="bang_acces" '.$checked.' value="PLAN"/>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="bang_acces" '.$checked.' value="CLE"/>
</td>
</tr>
<tr class="gris">
<td colspan=1 rowspan=1 class="titres_verti">
<label for="tim_acces">Professeur Tim</label>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="tim_acces" '.$checked.' value="NO"/>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="tim_acces" '.$checked.' value="PLAN"/>
</td>
<td colspan=1 rowspan=1>
<input type="radio" name="tim_acces" '.$checked.' value="CLE"/>
</td>
</tr>
</table>
</div>
';
$acces_pied='</p>';
$acces=$acces_en_tete.$options.$acces_pied;
echo $acces;
?>
A voir également:

1 réponse

J'ai finit par trouver une solution à mes pb de cases à cocher,cependant je ne sais pas comment faire pour laisser ma div ouverte au one click qui est plus loin.

code js:
<!--cacher le div-->
<script type="text/javascript">
function visibilite(thingId)
{
var
targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
}
else
{
targetElement.style.display = "none" ;
}
}
</script>

code php:
$options='
<a href="javascript:visibilite(\'dividnumero1\');">
<strong>Définir les options</strong></a>
<div id="dividnumero1" style="display:none;">
<p>
<strong>Options type :</strong>
</p>
<form method="post" action="test_ccm.php" name="options_type_acces">
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_no.' name="options_type_acces" value="no"/>
//...
</form>
</div>

Si vous avez une piste... Merci !
0
Bonsoir,
je reposte le code avec la solution de la seconde de mes questions.
La première n'est tjs pas résolue : pour rappel : je souhaiterais que lors de l'envoi du onclick, ma page se reload avec la div ouverte, afin de vois les modifs.
pour tester ce qui suis, qui fonctionne malgré tout, il suffit de l'enregistrer sous "test_ccm.php". Merci d'avance

<!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="en-GB">
 <head>
		<style>	
			#dividnumero1
			{
				width:300px;
			}
			table.tableau
			{
				width:300px;
			}
			.tableau
			{
				border:1px solid;
				border-collapse:collapse;
				text-align:center;
				padding:0px;
				margin:0px;
			}
			.tableau .titres_horiz
			{
			text-align:center;
			}
				.titres_horiz .acces
				{
				text-align:center;
				padding-top:10px;
				border:1px solid;
				}
				.titres_horiz .option
				{
				width:120px;
				text-align:center;
				padding-bottom:10px;
				padding-top:10px;
				}
			.ss_titres_horiz
			{
			text-align:center;
			border-bottom:1px solid;
			}
				.ss_titres_horiz td
				{
				width:30px;
				text-align:center;
				}
				
			.tableau .titres_verti
			{
			text-align:left;
			width:90px;
			border-right:1px solid;
			border-left:1px solid;
			}
			.tableau tr.gris
			{
			background-color:#e3e0e0;
			}
			.tableau td
			{
			border-left:1px solid #b8b7b7;
			width:30px;
			text-align:center;
			}
		</style>
		<!--cacher le div-->
		<script type="text/javascript">
			function visibilite(thingId)
				{
				var 
					targetElement;
					targetElement = document.getElementById(thingId) ;
				if (targetElement.style.display == "none")
					{
					targetElement.style.display = "" ;
					}
				else 
					{
					targetElement.style.display = "none" ;
					}
				}
		</script>
	<title>Test</title>
   </head>
<body>

<?php
//choix des options
$acces_en_tete='<p>';
//valeur de case précochée option type
$checked_no='';
$checked_plan='';
$checked_cle='';
$checked_autre='';
//valeur case précochée tableau
$checked_blop_no='';
$checked_bang_no='';
$checked_tim_no='';

$checked_blop_plan='';
$checked_bang_plan='';
$checked_tim_plan='';

$checked_blop_cle='';
$checked_bang_cle='';
$checked_tim_cle='';

	if(isset($_POST['options_type_acces']))
	{
		$options_type_acces=$_POST['options_type_acces'];
		//Personne n'a d'accès
		if($options_type_acces=='no')
		{
			$checked_no=' checked="checked" ';
			$checked_blop_no=' checked="checked" ';
			$checked_bang_no=' checked="checked" ';
			$checked_tim_no=' checked="checked" ';
		}
		//tout le monde a accès aux plans
		elseif($options_type_acces=='plan')
		{
			$checked_plan=' checked="checked" ';
			$checked_blop_plan=' checked="checked" ';
			$checked_bang_plan=' checked="checked" ';
			$checked_tim_plan=' checked="checked" ';
		}
		//tout le monde a accès aux clés
		elseif($options_type_acces=='cle')
		{
			$checked_cle=' checked="checked" ';
			$checked_blop_cle=' checked="checked" ';
			$checked_bang_cle=' checked="checked" ';
			$checked_tim_cle=' checked="checked" ';
		}
		//autres 
		elseif($options_type_acces=='autre')
		{
			$checked_autre=' checked="checked" ';
			$checked_bang_no=' checked="checked" ';
			$checked_blop_plan=' checked="checked" ';
			$checked_tim_cle=' checked="checked" ';
		}
		//(rien n'est précisé)
		else
		{
			//valeur de case précochée option type
			$checked_no='';
			$checked_plan='';
			$checked_cle='';
			$checked_autre='';
			//valeur case précochée tableau
			$checked_blop_no='';
			$checked_bang_no='';
			$checked_tim_no='';

			$checked_blop_plan='';
			$checked_bang_plan='';
			$checked_tim_plan='';

			$checked_blop_cle='';
			$checked_bang_cle='';
			$checked_tim_cle='';
		}
	}
	
//clic et si clic déplie les options sinon par déft tout à NON : pas d'accès
$options='
<a href="javascript:visibilite(\'dividnumero1\');"><strong>Définir les options</strong></a>
	<div id="dividnumero1" style="display:none;">
		<p>
		<strong>Options type :</strong>
		</p>
		<form method="post" action="test_ccm.php" name="options_type_acces">
			<br/>
				<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_no.' name="options_type_acces" value="no"/> 
				<label for="options_type_acces"> Aucun accès</label>
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()" '.$checked_plan.' name="options_type_acces" value="plan"/> 
				<label for="options_type_acces"> Plans</label>
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()" '.$checked_cle.' name="options_type_acces" value="cle"/> 
				<label for="options_type_acces"> Clés</label>
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()" '.$checked_autre.' name="options_type_acces" value="autre"/> 
				<label for="options_type_acces"> Autre</label>					
		</form>
		<table class="tableau">
				<tr valign="top" class="titres_horiz">
					<td colspan=1 rowspan=2 class="acces">
						<strong>Accès</strong>
					</td>
					<td colspan=4 rowspan=1 class="option">
						<strong>Options</strong>
					</td>
				</tr>
				<tr class="ss_titres_horiz">
					<td colspan=1 rowspan=1>
						Aucun accès
					</td>
					<td colspan=1 rowspan=1>
						Plans
					</td>
					<td colspan=1 rowspan=1>
						Clés
					</td>
				</tr>
				<tr class="gris">
					<td colspan=1 rowspan=1 class="titres_verti">
						<label for="blop_acces">Professeur Blop</label>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces" '.$checked_blop_no.' value="NO"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces" '.$checked_blop_plan.' value="PLAN"/>
					
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces" '.$checked_blop_cle.' value="CLE"/>
					</td>
				</tr>
				<tr>
					<td colspan=1 rowspan=1 class="titres_verti">
						<label for="bang_acces">Professeur Bang</label>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces" '.$checked_bang_no.' value="NO"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces" '.$checked_bang_plan.' value="PLAN"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces" '.$checked_bang_cle.' value="CLE"/>
					</td>
				</tr>
				<tr class="gris">
					<td colspan=1 rowspan=1 class="titres_verti">
						<label for="tim_acces">Professeur Tim</label>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces" '.$checked_tim_no.' value="NO"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces" '.$checked_tim_plan.' value="PLAN"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces" '.$checked_tim_cle.' value="CLE"/>
					</td>
				</tr>	
			</table>
	</div>
';
$acces_pied='</p>';
$acces=$acces_en_tete.$options.$acces_pied;
echo $acces;
?>
0
Up...
0