Des formulaires web 2.0 avec quickform

Quickform est un composant Joomla formidable, avec il est possible de réaliser de simple formulaire tout comme des application complexes, nous avons déjà parlé de ce composant sur ce site lors de notre contribution à l’internationalisation des formulaires.

Nous l’utilisons par exemple pour réaliser une application de Gestion et Enregistrement/Saisie des notes de frais pour une association ayant plusieurs centaines de salariés.

La problématique que nous allons résoudre au long de cette article consiste à dissimuler ou faire apparaître des champs supplémentaires à un formulaire réalisé avec QuickForm et ce en fonction d’un choix fait via un Radio bouton du formulaire en question (cf capture ci-dessous).

capture partielle du formulaire quickform complet

Capture partielle du formulaire complet

capture partielle du formulaire avec champs cachés

Capture partielle du formulaire avec champs cachés

ATTENTION : Le code JAVASCRIPT mentionné ici aura pour but de faire apparaître ou disparaître 2 zones de champs en fonction du choix fait sur un radio bouton intitulé rallerretour.

Alors comment faire :

1°) Donner un nom aux bloc DIV que nous allons passé de hidden à visible. Il faut editer le champs en question et personnaliser son du code javascript à votre formulaire en allant dans la partie « Mise en page de la ligne », il faut ajouter un id à la première balise div (<div> devient <div id= »lieudestination »>).

personnalisation-mise-en-page-champs-formulaire

Personnalisation de la mise en page du champs du formulaire que l'on souhaite afficher ou cacher

2°) Ajouter du code javascript à votre formulaire en allant dans la partie « Personnalisation du code » accéssible en cliquant directement sur le nom de votre formulaire dans la liste de « Gestion des formulaires »

personnalisation du formulaire

Personnalisation de votre formulaire

Voici le code javascipt que vous pouvez utiliser si votre template/thème utilise le framework javascript mootools

[code type= »javascript »]
var mySlide = new Fx.Slide(‘lieudestination’);
var mySlide2 = new Fx.Slide(‘adresselieudestination’);

window.onload = radiocoche();

function radiocoche() {
var res = false;
var d = document.forms["submit"];
for(var i=0; i<d.length; i++) {
if (d[i].name == "QF[allerretour]") {
if (d[i].checked) {
if (d[i].value == 1) {
mySlide.show().toggle();
mySlide2.show().toggle();
//document.getElementById("adresselieudestination").style.visibility = "hidden"
//document.getElementById("lieudestination").style.visibility = "hidden"
} else {
mySlide.hide().toggle();
mySlide2.hide().toggle();
//document.getElementById("adresselieudestination").style.visibility = "visible"
//document.getElementById("lieudestination").style.visibility = "visible"
}
}
}
}
return true;
}
[/code]

Si votre thème n’utilise pas mootools alors vous devrez vous passez des transitions (à moins que vous ne sachiez les réaliser avec le framework javascript utilisé par votre thème)
Le code devient alors

[code type= »javascript »]
window.onload = radiocoche();

function radiocoche() {
var res = false;
var d = document.forms["submit"];
for(var i=0; i<d.length; i++) {
if (d[i].name == "QF[allerretour]") {
if (d[i].checked) {
if (d[i].value == 1) {
document.getElementById("adresselieudestination").style.visibility = "hidden"
document.getElementById("lieudestination").style.visibility = "hidden"
} else {
document.getElementById("adresselieudestination").style.visibility = "visible"
document.getElementById("lieudestination").style.visibility = "visible"
}
}
}
}
return true;
}
[/code]

3°) Ajouter l’appel de la fonction lors du changement opéré sur le radio bouton

Dans la personnalisation du champs (ici nommé « allerretour ») ajouter le code suivant dans la seciotn « Personnalisation du champ options HTML (style, onclick, onblur,…)« 

[code type= »javascript »]
onclick="radiocoche()"
[/code]

4°) Réinitialisation des valeurs des champs cachés (Optionnel)

Si vous ne souhaitez pas conserver les valeurs enregistrés pour les champs cahés lors de l’enregistrement du formulaire vous pouvez les supprimer en ajoutant du code php dans les options de personnalisation de votre formulaire (cf capture ci-dessus puis section « Script de modification des données juste avant enregistrement »).

[code type= »php »]
if($this->post[‘allerretour’]==’1′) {
$this->post[‘lieudestination’] = "";
$this->post[‘adresselieudestination’] = "";
}
return $this->post;
[/code]