(FormDialog) Formulaire sérialisable + support ajax

Télécharger le projet
Commenter

Description

Bonjour à tous,

Après presque 10 ans d'inactivité, je vous présente une petite class que j'ai fais pour un projet. Il s'agit d'un formulaire, comme l'indique le titre, ayant quelque particularité.
Il peut être appelé de 2 façon, soit avec un tag spécifique ou via un script js.

Exemple avec un tag html : 
<dialog type="form" id="form-connect" name="connect">
{
        "Title":"Connection",
        "FormMethod":"POST",
        "FormAction":"login.php",
        "ItemCollection":[
         {
          "name":"login",
          "label":"Login :",
          "ItemType":"INPUT"
         },
         {
          "name":"password",
          "label":"Mot de passe :",
          "ItemType":"PASSWORD"
         }
        ],
        "onSubmit":"function() { return false; }"
       }
</dialog>


Exemple avec une function : 
function openFormLogin() {
 var fd = new FormDialog({id:"form-connect", name:"connect", Title:"Connection"});
 fd.FormMethod="POST";
 fd.FormAction="login.php";
 fd.addInput({name:"login", label:"Login :"}).addPassword({name:"password",label:"Password :"}).Open();
}


Il intègre quelques évènements personnalisé (onBeforeOpen, onOpen, onClose...)
La possibilité de sérialisé et inversement.
Mise à part "la construction" du formulaire, l'ensemble des animations / apparence, onglet compris sont en CSS.

Avec le script, j'ai fournie tout une doc html nommé "Demo.html", vous y trouverez tout les détails de la class ainsi que des formulaires d'exemple.

D'autre chose sont à venir comme Ajax et divers ;)

Bonne lecture, amusement :)

-----------------------------------------------------------------------
Petite mise à jour :

-> Ajout du support ajax.
-> Un nouvel évènement personnalisé 'onAjaxReadyStateChange' (pas si neuf mais tout de même)
-> Ajout d'un spinner visible uniquement lors des requêtes ajax.
-> Suppression des fonctions inutile
-> Mise à jour de la documentation ainsi qu'une nouvelle démo.

Petit exemple : 
function openFormAjax()
{
 var d = document.getElementById('demo-ajax');
 if (d == null)
 {
  var fd = new FormDialog({
   id:"demo-ajax",
   name:"demo-ajax",
   Title:"Connection",
   Ajax: {
    enabled:true,
    jsonFormated:false,
    enableSpin:true,
    customInit:null
   },
   onAjaxReadyStateChange: function(e)
   {
    var _ajax = e.detail.ajax;
    if (_ajax.state == 4 && _ajax.status == 200)
    {
     document.getElementById('log3').value = _ajax.xhr.responseText;
     e.target.FormDialog.Close();
    }
   }
  });
  
  fd.FormMethod="POST";
  fd.FormAction="demo.php";
  fd.addParagraph({html:"N'entrez pas de donnée sensible, ou confidentielle", style:"font-style:italic"})
   .addInput({name:"login", label:"Login :", value:"UserTest"})
   .addPassword({name:"password",label:"Password :",value:"SomePassword#123"});
  d = fd.Element;
 }
 d.FormDialog.Open();
}


Vous pouvez accéder à la demo à cette adresse : http://www.sgs-eos.fr/FormDialog/ si vous le souhaitez.
Si vous avez des questions, n'hésitez pas.

Bien à vous ;)

-----------------------------------------------------------------------

- Ajout des 2 élèments radio et checkbox manquant.
- Le style CSS ne s'applique qu'à la class .dialog et non à body pour certains tags.
- Ajout d'un attribut Animate (définit à true par défaut).
- Le doc a été revue.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Vince_02)