Une question, un devis ? contactez nous au  06.89.986.982 ou demander à être rappelé.

Afficher les résulats d’un formulaire ds une boîte modale avec SPIP 3

Par défaut, le plugin mediabox est installé dans la distribution de Spip3.

Vous pouvez afficher le résultat d’un formulaire simple dans une boîte modale (fenêtre surpuissante qui se place au centre de l’écran d’un navigateur en occultant l’arrière plan) à l’aide d’un appel javascript.

Cette méthode déroge de la méthode CVT habituellement utilisée dans les développements Spip.

Pour l’exemple ci dessous, imaginons que vous vouliez afficher les articles ayant un mot clé spécifique.

dans un premier temps le code HTML du formulaire :

<form action="#"' method="post" class="formulaire_spip" id="form_liste" name="form_devis" >
<ul>
<li>
<label class="pays">Pays</label>
<select name="id_mot" id="id_mot">
<BOUCLE_pays(MOTS){id_groupe=9}>
<option value="#ID_MOT" [(#ID_MOT|=={#ENV{id_mot}}|oui)selected="selected"]>[(#TITRE|supprimer_numero)]</option>
</BOUCLE_pays>
</select>
</li>
<li>
<div class="bouton"><input type="submit" value="Ok" /></div>
</li>
</ul>
</form>

Ensuite il vous faudra intégrer dans le head de votre page le code suivant :

<script type="text/javascript">
// les variables
var id_mot="0";
// lorsque le document est chargé
$(document).ready(function() {
// on appel la fonction lorsque l'on soumet le formulaire avec l'ID form_liste
$('#form_liste').submit(function(){
var id_mot = $("#form_liste #id_mot").val();
// appel de la boîte modeale qui charge la page passée en paramètre
$.modalboxload('spip.php?page=listes&id_mot='+id_mot,options);
// pour ne pas soumettre le formulaire
return false;
});
});
</script>

Cette fonction nécessite la bibliothèque Jquery qui est déjà installé avec SPIP 3.

Demander un devis, nous contacter


Envoyer un message

Nous contacter par tél. au 06.89.986.982

On vous rappelle ?

Vous souhaitez avoir plus de renseignements sur notre offre ? indiquez dans le champ ci-dessous votre nom et votre téléphone et nous vous rappelons dans les délais plus brefs.