Hidden ou non dès que tu valides un formulaire la page est rechargée avec l'url indiquée dans action. Donc c'est pas l'idéal avec AJAX
la fonction serialize de php transforme en fait n'importe quelle variable en chaîne de caractères pouvant être stockée dans un fichier ou une base de données. C'est d'ailleurs utilisé par les sessions en php.
Par sérialisation du formulaire je veux dire faire ne sorte de récupérer les noms de tous les champs et leur valeur respective
Voici un ex qui peut être amélioré ou adapté selon les besoins
Je créé un objet nommé FormSerializer
Pour sérialiser un formulaire il suffit d'appeller la méthode FormSerializer.serialize() avec l'identifiant du formumlaire passé en paramètre et c'est tout ;-) Le méthode se débrouille pour parcourir le formulaire et rétrouver tous les champs et leur valeur.
FormSerializer.serialize() retourne la chaîne de tous les paramètres présents dans le formulaire sous la forme
"champ0=valeur_champ0&champ1=valeur_champ1& ... champN=valeur_champN"
mais ce n'est qu'une possibilité
Après appel à FormSerializer.serialize() pour récupérer de nouveau la chaîne des paramètres il suffit d'appeler la méthode FormSerializer.getParamString()
Note que c'est cette même méthode que initialize() appelle en interne ;-)
Concrètement FormSerializer stocke tous les champs trouvés dans un formulaire dans le tableau
fields
FormSerializer.fields permet d'y accèder
Chaque élément par ex FormSerializer.fields[0] est lui-même un objet qui contient les 2 propriétés suivantes
name : retourne le nom du champ
value : retourne la valeur du champ
On peut donc utiliser FormSerializer.fields[0].name et FormSerializer.fields[0].value : pratique non ?
Note que plusieurs paramètres peuvent porter le même nom car j'ai préféré faire un truc simple plutôt que de stocker des objets imbriqués.
Nota : tu peux très bien remplacer
if (node.nodeType != DOM.nodetype.ELEMENT_NODE) return;
par
if (node.nodeType != 1) return;
et ne pas utiliser du tout l'objet DOM qui ne sert ici qu'à stocker des constantes.
Voilà le code (il se peut qu'il reste des bugs lol) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test sérialisation de formulaire</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
var DOM = {};
DOM.nodetype =
{
ELEMENT_NODE : 1,
ATTRIBUTE_NODE : 2,
TEXT_NODE : 3,
CDATA_SECTION_NODE : 4,
ENTITY_REFERENCE_NODE : 5,
ENTITY_NODE : 6,
PROCESSING_INSTRUCTION_NODE : 7,
COMMENT_NODE : 8,
DOCUMENT_NODE : 9,
DOCUMENT_TYPE_NODE : 10,
DOCUMENT_FRAGMENT_NODE : 11,
NOTATION_NODE : 12
}
var FormSerializer = {}
FormSerializer.addField = function(name,value)
{
this.fields.push({name:name, value:value});
}
FormSerializer.callBack = function(node)
{
if (node.nodeType != DOM.nodetype.ELEMENT_NODE) return;
if (typeof node.type != "undefined")
{
switch (node.type.toLowerCase()) {
case 'submit':
break;
case 'hidden':
break;
case 'password':
break;
case 'text':
this.addField(node.name,node.value);
break;
case 'checkbox':
if (node.checked) this.addField(node.name,node.value);
break;
case 'select-one':
if (node.selectedIndex >= 0)
{
var i = node.selectedIndex;
this.addField(node.name,(node.options[i].value) ? node.options[i].value : node.options[i].text);
}
break;
case 'select-multiple':
for (var i = 0; i < node.options.length; i++)
{
if (node.options[i].selected)
{
this.addField(node.name,(node.options[i].value) ? node.options[i].value : node.options[i].text);
}
}
break;
case 'radio':
if (node.checked) this.addField(node.name,node.value);
break;
case 'textarea' :
this.addField(node.name,node.value);
break;
}
}
}
FormSerializer.traverse = function(node)
{
if (!node) return;
this.callBack(node);
for (var i = 0; i < node.childNodes.length; i++)
{
this.traverse(node.childNodes[i]);
}
}
FormSerializer.getParamString = function()
{
var result = "";
for (var i =0; i <this.fields.length; i++)
{
if (result != "") result += "&";
result += this.fields[i].name+"="+escape(this.fields[i].value);
}
return result;
}
FormSerializer.serialize = function(formId)
{
this.frm = document.getElementById(formId);
this.fields = new Array();
this.traverse(this.frm);
return this.getParamString();
}
function testSerialisation(formId)
{
FormSerializer.serialize(formId);
var result = "Contenu du tableau fields\n";
for (var i=0; i < FormSerializer.fields.length; i++)
{
result += "fields["+i+"] : "+FormSerializer.fields[i].name+" = "+FormSerializer.fields[i].value+"\n";
}
result+="\n"+"Chaîne de paramètres : \n"+FormSerializer.getParamString();
alert(result);
}
</script>
</head>
<body>
<form id="demo">
<br />
<fieldset><legend>Champ texte mono-ligne</legend>
<input type="text" name="comment[titre]" size="40" maxlength="40">
</fieldset>
<br />
<fieldset><legend>Textarea multi-ligne</legend>
<textarea name="comment[texte]" cols="40" rows="3"></textarea>
</fieldset>
<br />
<fieldset><legend>Select mono selection</legend>
<select name="liste_mono_selection" size=3>
<option value="mono0">Mono selection 0</option>
<option>Mono selection 1</option>
<option value="mono2">Mono selection 2</option>
</select>
</fieldset>
<br />
<fieldset><legend>Select multi selection</legend>
<select name="liste_multi_selection[]" multiple size=3>
<option value="multi0">Multi selection 0</option>
<option>Multi selection 1</option>
<option value="multi2">Multi selection 2</option>
</select>
</fieldset>
<br />
<fieldset><legend>Radiobox</legend>
Homme : <input type="radio" name="sexe" value="M"><br />
Femme : <input type="radio" name="sexe" value="F">
</fieldset>
<br />
<fieldset><legend>Checkbox</legend>
<input type="checkbox" name="mushrooms">mushrooms<br />
<input type="checkbox" name="greenpeppers">green peppers<br />
<input type="checkbox" name="onions">onions<br />
<input type="checkbox" name="tomatoes">tomatoes
</fieldset>
<input onclick='testSerialisation("demo");' type='button' value='Sérialiser'>
</form>
</body>
</html>
