formjson

Cette page explique comment transformer un formulaire en JSON pour l'enregistrer "quelque part", et surtout comment relire le JSON et remplir le formulaire à partir des informations de celui-ci.

Scripts javascript

Vous devez inclure les fichiers suivant :

• jquery
• jquery.json
• jquery.URLEncode

Pour écrire le formulaire "quelque part" vous devez creer un CGI auquel vous enverrez le formulaire. Le CGI renvoi un content-type:text/plain contenant le message à afficher.

$('#monformulaire').submit( function() {
    var json = $.toJSON( $(this).serializeArray() );
        $.post( 'write.cgi',{ JSON:json}, function(data) { alert(data); } );
        return false;
    } );

La difficulté principale vient de la relecture du fichier JSON, car le fichier ne contient pas d'information sur le type des inputs, on parcourt donc le formulaire pour trouver les types des inputs avant de remplir les champs.

$.get( "fichier.json?r="+math.random(), function(db) {
            $.map( $.evalJSON($.URLDecode(db)) ,function(e,i) {
                var inputs = $('#monformulaire *[name='+e.name+']');

                if(inputs.length==1) {
                    if(inputs[0].type == 'text')
                        inputs[0].value = e.value;
                    else if(inputs[0].type == 'select-one')
                        inputs[0].value = e.value;
                    else if(inputs[0].type == 'checkbox')
                        inputs[0].checked = e.value;
                }
                else if(inputs.length>1) {
                    if(inputs[0].type=='radio') {
                        $.map(inputs,function(o,i) {
                            if(e.value == o.value) o.checked = 1;
                        });
                    }
                }
        });
    });

Formulaire de test