Agitez votre trafic avec Oseox, Plus de 400 cours gratuits.
Profitez de nos meilleurs conseils, Recevez notre newsletter pro !
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'));
}
Une question ? Venez la poser sur notre forum développement web !
A propos de l'auteur
Antoine Beaumont est Consultant Web et Développeur indépendant. Fort d'une expérience construite au sein de grandes agences Web-marketing, pour tous types de comptes, il accompagne désormais les professionnels dans leurs projets Web, de façon souple et objective.
