Cocher une case avec du JavaScript
Exemple de code d'une page PHP avec une case à cocher qui sera effectivement cochée via une fonction en JavaScript
Le principe :
En fin de page vous avez le code HTML qui permet de créer une case à cocher :
Ma case à cocher : <input TYPE=CHECKBOX UNCHECKED name="Checkbox1" id="Checkbox1" value="Pouet" type="CHECKBOX"></br>
Un champ de saisi (une inputbox) permet de déclencher une fonction JavaScript
<p><input type="text" name="Input1" id="Input1" value="Cliquez sur cette zone pour cocher la case via du JavaScript" size="70" onclick="fctCocherCase(1);"></p>La fonction JavaScript fctCocherCase déclarée en début de document coche la case.
Pour cela elle passe via une autre fonction JavaScript : recupValeurElement
function fctCocherCase(ObjNumber)
{
recupValeurElement("Checkbox" + ObjNumber).checked = true;
}Le code de la page PHP d'exemple
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
<LINK rel="stylesheet" type="text/css" href="../style.css">
<title>Titre du site</title>
<meta name="Description" content="Description du site"/>
<meta name="author" content="Bob l'éponge" />
<meta name="Keywords" content="a, b, c"/>
<SCRIPT TYPE="text/javascript">
function recupValeurElement(IdElement)
{
if (document.getElementById)
{
return document.getElementById(IdElement);
}
else if (document.all)
{
return document.all[IdElement];
}
}
function fctCocherCase(ObjNumber)
{
recupValeurElement("Checkbox" + ObjNumber).checked = true;
}
</SCRIPT>
</HEAD>
<BODY>
<div id="bloc_page">
<?php
//Tiré de http://www.siteduzero.com/informatique/tutoriels/les-magic-quotes-ou-guillemets-magiques/desactiver-les-magic-quotes
//Cette option permet de retirer les magic quotes sur un serveur où c'est activé et où vous n'avez pas la main. C'est importante lorsque l'on poste récupère des valeurs de champs Input et textarea faute de quoi, par exemple, "C'est" deviendra "C\'est"
function stripslashes_r($var) // Fonction qui supprime l'effet des magic quotes
{
if(is_array($var)) // Si la variable passée en argument est un array, on appelle la fonction stripslashes_r dessus
{
return array_map('stripslashes_r', $var);
}
else // Sinon, un simple stripslashes suffit
{
return stripslashes($var);
}
}
if(get_magic_quotes_gpc()) // Si les magic quotes sont activés, on les désactive avec notre super fonction ! ;)
{
$_GET = stripslashes_r($_GET);
$_POST = stripslashes_r($_POST);
$_COOKIE = stripslashes_r($_COOKIE);
}
?>
</div> <!-- div bloc_page -->
<p><input type="text" name="Input1" id="Input1" value="Cliquez sur cette zone pour cocher la case via du JavaScript" size="70" onclick="fctCocherCase(1);"></p>
Ma case à cocher : <input TYPE=CHECKBOX UNCHECKED name="Checkbox1" id="Checkbox1" value="Pouet" type="CHECKBOX"></br>
</BODY>
</HTML>Avec la même méthode, on peut regarder si une case à cocher l'est, et remplir ou non un champ en fonction :
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<SCRIPT TYPE="text/javascript">
function recupValeurElement(IdElement)
{
if (document.getElementById)
{
return document.getElementById(IdElement);
}
else if (document.all)
{
return document.all[IdElement];
}
}
</SCRIPT>
</HEAD>
<BODY>
Ma case : <input TYPE=CHECKBOX CHECKED name="Checkbox1" id="Checkbox1" value="Pouet" type="CHECKBOX"></br>
<p><input type="BUTTON" name="Input1" id="Input1" value="Cliquez sur cette zone pour cocher la case via du JavaScript" onclick="fctRecupCase();"></p>
<FORM METHOD="POST" id="MonFormulaire">
<input type="text" name="RetourTest" id="RetourTest" value="" ><br />
</FORM>
<script type="text/javascript">
function fctRecupCase(){
if(recupValeurElement("Checkbox1").checked){recupValeurElement("RetourTest").value = 'CestOche';}
else{recupValeurElement("RetourTest").value = '';}
}
</script>
</BODY>
</HTML>Article(s) précédent(s)
Article(s) en relation(s)