Listes liées avec HTML et JAVASCRIPT

2 messages   •   Page 1 sur 1
Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

15 Oct 2010, 16:03

Une solution simple en HTML et JAVASCRIPT pour de petites listes liées sans nécessiter un rechargement de la page.

Le principe est d'écrire les listes liées dans le code HTML, de les cacher en CSS, puis de les faire afficher en JAVASCRIPT suivant le choix du visiteur.


A/ Avantages :

1/ Très facile à mettre en place, code facile à comprendre.

2/ Les listes liées étant toutes dans le code HTML, leur contenu est naturellement référencé par les moteurs de recherche.


B/ Inconvénients :

1/ Les listes liées étant toutes dans le code HTML, elles ne doivent pas être très longues et/ou très nombreuses sans craindre un ralentissement du chargement de la page. Pour de plus gros besoins voir ce tuto.

2/ Fonctionnement dépendant de javascript. Ce dispositif devrait être doublé par un fonctionnement entièrement en php pour ne pas être dépendant de javascript (tout comme devrait l'être un fonctionnement avec ajax...).


C/ Fonctionnement :

Le choix de catégorie se fait ici par des boutons radio. Une solution alternative avec un select est mise en commentaire dans le code html.

Syntaxe à respecter pour un bon fonctionnement du code javascript :

1/ La classe des boutons radios, ou la classe du premier select, doit correspondre à l'id du bloc contenant la liste des sélections liées.

2/ Les valeurs des boutons radio, ou les valeurs des options du premier select, doivent correspondre aux id des listes des sélections liées.


Le code javascript est documenté au fil de l'eau.

(Vous n'avez pas besoin de modifier le code javascript, ni les paramètres pour l'appel à la fonction javascript "Affiche_liste(this.className,this.value)", si vous respectez la syntaxe ci-dessus)


Un exemple complet :

<?php
if (isset($_POST["envoyer"]))
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<!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>Listes liées HTML JAVASCRIPT</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
// Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
var id_ensemble_select = document.getElementById(id_ensemble_select);

// Sélection de la sélection liée
var id_select = document.getElementById(id_select);

if(id_ensemble_select)
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();

// Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau
tab = id_ensemble_select.getElementsByTagName('select');

var tablength = tab.length;

// Liste les éléments du tableau
for (i=0; i < tablength; i++)
{
// Met les selects en disable = true et les cache avec style.display = 'none'
tab[i].disabled = true;
if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien
}

// Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'
if(id_select)
{
id_select.disabled = false;
id_select.style.display = 'inline';
}
}

}
-->
</script>
<style type="text/css">

#categorie
{
height:2em;
}

#categorie select
{
display:none;
}

</style>

</head>

<body>

<div style="width:40em;margin:auto; border:1px solid black;padding:1em">

<form action = "#" method = "post">

<p>
<label for="choix_cadets">cadets</label>
<input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />

<label for="choix_juniors">juniors</label>
<input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />

<label for="choix_seniors">seniors</label>
<input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />

<!--
<select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />

<option value = "">«Choisissez»</option>
<option value = "cadets">cadets</option>
<option value = "juniors">juniors</option>
<option value = "seniors">seniors</option>

</select>
-->
</p>


<p style="font-style:italic">La liste déroulante ci-dessous s'affichera en fonction du choix ci-dessus :</p>

<p id = "categorie"> <!-- style= "display:inline" disabled="disabled" pour la première liste pour réserver un affichage de la liste non active dès le chargement de la page -->
<select name = "selection" id = "cadets" style= "display:inline" disabled="disabled">

<option value = "">«Choisissez»</option>
<option value = "cadet1">Cadet 1</option>
<option value = "cadet2">Cadet 2</option>

</select>


<select name = "selection" id = "juniors">

<option value = "">«Choisissez»</option>
<option value = "junior1">Junior 1</option>
<option value = "junior2">Junior 2</option>

</select>


<select name = "selection" id = "seniors">

<option value = "">«Choisissez»</option>
<option value = "senior1">Senior 1</option>
<option value = "senior2">Senior 2</option>
<option value = "senior3">Senior 3</option>

</select>
</p>


<p style="font-style:italic">Exemple autre champ texte</p>

<p>
<input type="text" name="autre_champ"/>
<br />
<br />

<input name = "envoyer" value = "Envoyer" type = "submit"/>
</p>
</form>

</div>

</body>
</html>

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

02 Juin 2011, 20:38

Bonjour,

Si vous souhaitez valider votre formulaire en php, vous souhaiterez certainement que les listes cochées ou affichées initialement, restent cochées ou affichent les mêmes valeurs lors du rechargement de la page du formulaire pour correction par le visiteur.

On peut faire le code suivant :

<?php
//Si on travaille en utf-8
header('Content-type: text/html; charset=UTF-8');

if (!session_id()) session_start();//déclare l'ouverture d'une session si aucune n'a été déclarée auparavant.


if (isset($_POST['envoyer']))
{

function Verif_magicquotes ($chaine)// fonctin qui applique stripslashes si get_magic_quotes_gpc() est activé
{
if (get_magic_quotes_gpc()) $chaine = stripslashes($chaine);

return $chaine;
}


$message = array();// Pour enregistrer les messages d'information

$_SESSION['post_form']['message'] =& $message;// avec & on assigne $message à $_SESSION['post_form']['message'] c.a.d. tout changement dans $message sera répercuté dans $_SESSION['post_form']['message'] (et inversement).


$_SESSION['post_form']['cat'] = $cat = isset($_POST['cat']) && trim($_POST['cat']) != '' ? Verif_magicquotes(trim($_POST['cat'])) : null;

$_SESSION['post_form']['selection'] = $selection = isset($_POST['selection']) && trim($_POST['selection']) != '' ? Verif_magicquotes(trim($_POST['selection'])) : null;

$_SESSION['post_form']['nom'] = $nom = isset($_POST['nom']) && trim($_POST['nom']) != '' ? Verif_magicquotes(ucfirst(trim($_POST['nom']))) : null;//ucfirst pour convertir le première lettre en majuscule

$_SESSION['post_form']['prenom'] = $prenom = isset($_POST['prenom']) && trim($_POST['prenom']) != '' ? Verif_magicquotes(ucfirst(trim($_POST['prenom']))) : null;//ucfirst pour convertir le première lettre en majuscule

$_SESSION['post_form']['numtel'] = $numtel = isset($_POST['numtel']) && trim($_POST['numtel']) != '' ? Verif_magicquotes(trim($_POST['numtel'])) : null;

$_SESSION['post_form']['codepostal'] = $codepostal = isset($_POST['codepostal']) && trim($_POST['codepostal']) != '' ? Verif_magicquotes(trim($_POST['codepostal'])) : null;

$_SESSION['post_form']['ville'] = $ville = isset($_POST['ville']) && trim($_POST['ville']) != '' ? Verif_magicquotes(trim($_POST['ville'])) : null;



if (!isset($cat))
{
$message[] = 'Veuillez choisir une catégorie';
}



if (!isset($selection))
{
$message[] = 'Veuillez choisir une option dans la seconde liste déroulante';
}



if (isset($nom))
{
if (! preg_match('#^[a-zéèàçïêë ]{3,18}$#i',$nom))
{
$message[] = 'Le nom "'.$nom.'" n\'est pas valide. Minimum 3 lettres, maximum 18. Chiffres non autorisés. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer votre nom';
}



if (isset($prenom))
{
if (! preg_match('#^[a-zéèàçïêë ]{3,18}$#i',$prenom))
{
$message[] = 'Le prénom "'.$prenom.'" n\'est pas valide. Minimum 3 lettres, maximum 18. Chiffres non autorisés. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer votre prénom';
}



if (isset($numtel))
{
if (!(preg_match("#^0[0-9]([-. ]?[0-9]{2}){4}$#", $numtel)))
{
$message[] = 'Le numéro de télélphone "'.$numtel.'" n\'est pas valide. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer un numéro de téléphone';
}



if (isset($codepostal))
{
if (! preg_match('#^[0-9]{5}$#',$codepostal))
{
$message[] = 'Le code postal doit être un nombre de 5 chiffres';
}
}
else
{
$message[] = 'Veuillez indiquer le code postal';
}



if (!isset($ville))
{
$message[] = 'Veuillez indiquer la ville';
}



if (isset($message) && count($message) == 0)
{
//Effacement éventuel des variables de session (ou ne pas effacer si l'on veut garder les champs de formulaires remplis suite à une redirection sur cette même page)
//unset($_SESSION['post_form']);


// Connexion à la base de données pour enregistrement des données...
//...

$message[] = 'insciption ok';// pour les besoins de la démo
header('Location: '.$_SERVER['PHP_SELF']);// pour les besoins de la démo
}
else
{
header('Location: '.$_SERVER['PHP_SELF']);// redirige vers la page en cours en cas d'erreur (car count($message) > 0)
exit;
}
}

?>
<!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="application/xhtml+xml; charset=utf-8" />
<title>Listes li&eacute;es HTML JAVASCRIPT</title>

<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
// Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
var id_ensemble_select = document.getElementById(id_ensemble_select);

// Sélection de la sélection liée
var id_select = document.getElementById(id_select);

if(id_ensemble_select)
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();

// Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau
tab = id_ensemble_select.getElementsByTagName('select');

var tablength = tab.length;

// Liste les éléments du tableau
for (i=0; i < tablength; i++)
{
// Met les selects en disable = true et les cache avec style.display = 'none'
tab[i].disabled = true;
if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien
}

// Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'
if(id_select)
{
id_select.disabled = false;
id_select.style.display = 'inline';
}
}
}



// Affiche la liste sélectionnée et l'élément sélectionné au rechargement de la page
function Affiche_liste_selected(id_ensemble_select, value_select_1, value_select_2)
{
//sélection de l'élément, avec getElementById, de la catégorie sélectionnée
var id_selection = document.getElementById(value_select_1);

if(id_selection)
{
// Appel à la fonction Affiche_liste pour afficher la sous catégorie correspondante et mettre les autres en disabled = true;
Affiche_liste(id_ensemble_select,value_select_1);

var id_selectionlength = id_selection.length;

//liste les éléments du tableau
for (i=0; i < id_selectionlength; i++)
{
// on regarde si l'option du select est égal à la valeur de l'option 2 sélectionnée
if (id_selection.options[i].value == value_select_2)
{
// Si oui on le sélectionne
id_selection.options[i].selected = true;
}
}
}
}


// fonction générique permettant un appel aux fonctions javascript dès le chargement de la page.
function AddLoad_AFS(func) {

if (window.addEventListener)
{
window.addEventListener("load", func, false);
}
else if (document.addEventListener)
{
document.addEventListener("load", func, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", func);
}
}


<?php if (isset($_SESSION['post_form']['cat']))
{
$value_select_1 = $_SESSION['post_form']['cat'];
$value_select_2 = isset($_SESSION['post_form']['selection'])? $_SESSION['post_form']['selection'] : null;
?>
// Appel à la fonction générique de cbargement onload qui appelle la fonction Affiche_liste_selected avec comme arguments l'id du bloc contenant les sélections liées, la valeur de la catégorie sélectionnée (= à l'id du bloc du select lié) et la valeur de l'option sélectionnée dans la deuxième liste.
AddLoad_AFS(function(){Affiche_liste_selected('categorie','<?php echo $value_select_1?>','<?php echo $value_select_2?>')});

<?php } ?>
-->
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}

p, input, select, form, option
{
padding:0;
margin:0;
}

#form_identification p
{
padding:0.5em;
}

/*.categorie {
width:1.2em;
padding:0;
margin-right: 1em;
}
*/
#categorie, #liste1
{
height:1.5em;
display:inline;
}

#categorie select
{
display:none;
}

</style>

</head>

<body>

<div style="width:48em;margin:auto; border:1px solid black;padding:1em">
<form action="#" method="post" id = "form_identification">

<p style="font-size:0.9em; font-style:italic;margin-bottom:1em">Cochez une des cat&eacute;gories ci-dessous, puis une option dans la liste qui s'affichera en fonction de votre choix. </p>

<div>
<p id="liste1">
<!--
<label for="choix_cadets">Cadets</label>
<input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "cadets") echo 'checked = "checked"'; ?> />

<label for="choix_juniors">Juniors</label>
<input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "juniors") echo 'checked = "checked"'; ?> />

<label for="choix_seniors">Seniors</label>
<input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "seniors") echo 'checked = "checked"'; ?> />

-->
<select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />

<option value = "">«Choisissez»</option>
<option value = "cadets" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "cadets") echo 'selected = "selected"'; ?>>Cadets</option>
<option value = "juniors" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "juniors") echo 'selected = "selected"'; ?>>Juniors</option>
<option value = "seniors" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "seniors") echo 'selected = "selected"'; ?>>Seniors</option>

</select>

</p>


<p id = "categorie">

<select name = "selection" id = "cadets" style= "display:inline" disabled="disabled">

<option value = "">«Choisissez»</option>
<option value = "cadet1">Cadet 1</option>
<option value = "cadet2">Cadet 2</option>

</select>


<select name = "selection" id = "juniors">

<option value = "">«Choisissez»</option>
<option value = "junior1">Junior 1</option>
<option value = "junior2">Junior 2</option>

</select>


<select name = "selection" id = "seniors">

<option value = "">«Choisissez»</option>
<option value = "senior1">Senior 1</option>
<option value = "senior2">Senior 2</option>
<option value = "senior3">Senior 3</option>

</select>

</p>
</div>



<div style="margin-top:2em">
<p>
<label for="nom"> Nom :</label>
<input type="text" id="nom" name="nom" value="<?php echo (isset($_SESSION['post_form']['nom'])) ? $_SESSION['post_form']['nom'] : '' ?>" />
</p>

<p>
<label for="prenom"> Pr&eacute;nom :</label>
<input type="text" id="prenom" name="prenom" value="<?php echo (isset($_SESSION['post_form']['prenom'])) ? $_SESSION['post_form']['prenom'] : '' ?>" />
</p>

<p>
<label for="numtel"> N&deg;de t&eacute;l&eacute;phone :</label>
<input type="text" id="numtel" name="numtel" value="<?php echo (isset($_SESSION['post_form']['numtel'])) ? $_SESSION['post_form']['numtel'] : '' ?>" />
</p>

<p>
<label for="codepostal"> Votre code postal :</label>
<input name="codepostal" id="codepostal" type="text" size="5" minlength= "5" maxlength="5" value="<?php echo (isset($_SESSION['post_form']['codepostal'])) ? $_SESSION['post_form']['codepostal'] : '' ?>" />
</p>

<p>
<label for="ville"> Ville :</label>
<input type="text" id="ville" name="ville" value="<?php echo (isset($_SESSION['post_form']['ville'])) ? $_SESSION['post_form']['ville'] : '' ?>" />
</p>

<p style="margin-top:1.5em">
<input name = "envoyer" value = "Envoyer" type = "submit"/>
</p>

</div>
</form>

<div style="font-size:0.8em; font-weight:bold">
<?php
if(isset($_SESSION['post_form']['message']) && count($_SESSION['post_form']['message']) > 0)
{
foreach($_SESSION['post_form']['message'] as $value) echo '<p>- '.$value.'</p>';
}
?>
</div>
</div>

</body>
</html>


Les autres champs sont uniquement là pour faire un exemple de formulaire complet. De même les motifs dans les regex (preg_match) sont arbitraires et devront être adaptés à vos besoins avant d'être utilisés.

Le code est documenté au fil de l'eau, il est autonome et peut-être testé dans une page séparée en faisant un simple copié-collé :)

Dans cet exemple ce sont deux select qui sont affichés (contre boutons radio plus select dans le premier exemple). Le code avec les boutons radio est présent mais mis en commentaires.

2 messages   •   Page 1 sur 1