MooTools et formulaire

Traiter un formulaire avec les fonctions MooTools

Réécrivons le script de traitement de formulaire mais avec MooTools.

Nous avons un formulaire HTML doté de 3 champs (post_id, name, et comment) que nous envoyons au serveur. Le serveur vérifie que les champs sont correctement renseignés et retourne une réponse en conséquence.

Les paramètres doivent être ajoutés à l'URL toujours de la même manière : une liste de clé=valeur séparés par un &, et débutée par un ?
?cle1=valeur1&cle2=valeur2&...

Afin d'être transmises proprement dans l'URL, les valeurs des champs doivent être protégées avec la fonction Javascript encodeURIComponent().

Ensuite, définissons les actions : .onSuccess sera chargée d'afficher le texte de réponse, et .onFailure chargée d'afficher un le d'erreur.

Fichier HTML

<p id="result"></p>
<form method="get" action="">
<input type="hidden" id="post_id" value="1" />
<input type="text" id="name" />
<input type="text" id="comment" />
<input type="button" id="send" value="Envoyer" />
</form>

FichierPHP

* Fichier PHP (send-form.php)
*
* Vérification des données reçues via la requête, et
* affichage d'une réponse.
*/

<?php
$post_id = ! empty($_GET['post_id']);
$name = ! empty($_GET['name']);
$comment = ! empty($_GET['comment']);

if ($post_id && $name && $comment)
echo '(PHP) OK...';
else
echo '(PHP) Error...';
?>

Fichier Javascript

// Lors du chargement de la page, nous ajoutons la fonction
// sendForm() sur l'évènement onclick du bouton #send
window.addEvent('domready', function(e)
{
$('#send').addEvent('click', sendForm);
});




function sendForm()
{
// Récupération des valeurs des champs de formulaire
var post_id = encodeURIComponent($('post_id').value);
var name = encodeURIComponent($('name').value);
var comment = encodeURIComponent($('comment').value);

// Préparation des paramètres d'URL
var params = '?post_id='+ post_id;
params += '&name='+ name;
params += '&comment='+ comment;

// Execution de la requpete AJAX lors du chargement de la page
var ajax = new Ajax('http://site.com/send-form.php',
{
onSuccess: function(pResponseText)
{
// Affichage de la réponse
ajaxBox_setText(pResponseText);
},
onFailure: function()
{
// Affichage d'un message d'erreur
ajaxBox_setText('Error...');
}
});

// Execution de la requête
ajax.request();
}




// Fonction de mise à jour du contenu de l'élement HTML #result
function ajaxBox_setText(pText)
{
$('#result').grab(new Element('p'));
}