Facebook LinkedIn SourceForge Twitter RSS LastFM
logologo

MooTools : Soumettre un formulaire via AJAX

Geoffray Warnants|25/07/2008|35 commentaires

MooTools 1.1 permettait de soumettre très simplement nos formulaires de manière asynchrone. La méthode send() de l'objet Form se chargeait de tout : Détection des attributs method et action du formulaire, envoi de toutes les données du formulaire via AJAX, réception de la réponse du serveur et même la possibilité de mettre à jour la page HTML avec le contenu ainsi reçu. On ne pouvait rêver plus simple, les fainéants comme moi s'en trouvaient ravis.
$('myForm').addEvent('submit', function(e) {
    new Event(e).stop();
    this.send({
        update: $('ajax_response')
    });
});
Depuis MooTools 1.2, à moins que je n'ai loupé une étape, il est nécessaire de passer par un objet Request qu'il faut initialiser soi-même pour reproduire le même comportement.
$('myForm').addEvent('submit', function(e) {
    new Event(e).stop();
    new Request({
        method: this.method,
        url: this.action,
        onSuccess: function(responseText, responseXML) {
            $('ajax_response').setHTML(responseText);
        }
    }).send(this.toQueryString());
});

<<< Retour

Vos commentaires

9 commentaires postés

clichy
16/07/2019 10:50Posté par clichy
Fonctionne très bien
Glamorous
24/06/2019 16:15Posté par Glamorous
merci pour le partage de ce script!
auto
20/06/2019 18:44Posté par auto
Merci pour le script
stage de code
16/05/2017 11:17Posté par stage de code
Excellent travail, tous les détails et bien écrit, je vous remercie!
jozzy-online
01/03/2010 21:48Posté par jozzy-online
besoin de vérifier :)
Abdelkader Elkalidi
04/11/2009 02:42Posté par Abdelkader Elkalidi
@M
Pas moyen de passer des fichiers dans une requete XHR, une iframe ou un uploader flash est une bonne alternative, l'exellent "FancyUpload" par exemple
JBG
14/10/2009 19:20Posté par JBG
@M : il faut utiliser l'enctype adhoc :
<form ... ENCTYPE = "multipart/form-data" ...>
</form>
M
23/09/2009 13:12Posté par M
salut,

dis, j'ai appliqué ta technique (qui fonctionne très bien pour de simple "post")

Mais j'ai voulu appliquer ceci à  l'upload de fichier, mais il me reconnait pas le $_FILES dans mon script PHP qui traite la requete :)
Fab
10/09/2008 08:36Posté par Fab
Ou aussi :
myForm.set('send', {url: 'contact.php', method: 'get'});
myForm.send();

Réagir à cet article

*


(Ne sera pas publiée, servira uniquement à afficher votre gravatar)


(Lien en dur et dofollow)

zend framework