Envoyer un formulaire par Ajax avec Mootools

Aujourd’hui nous allons voir comment envoyer un formulaire grâce à l’AJAX avec le framework javascript Mootools. Nous allons créer dans un premier temps 2 pages PHP, une qui contiendra le formulaire et l’autre qui affichera uniquement la réponse. Ensuite nous mettrons en place notre javascript qui capturera l’évènement submit du formulaire pour envoyer une requête AJAX à la place.


Formulaire

<!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">
<head>
	<title>Formulaire et Mootools</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="mootools-1.2.2-core-yc.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<form action="resultat.php" method="post" id="monForm">
		<fieldset>
			<legend>&nbsp;Qui êtes-vous ?&nbsp;</legend>
			<input type="text" name="nom" value="nom"/>
			<input type="text" name="prenom" value="prénom"/>
			<input type="submit" value="envoyer"/>
		</fieldset>
	</form>
	<div id="resultat"></div>
</body>
</html>

La ligne mootools-1.2.2-core-yc.js indique que c’est le framework mootools qui va être utilisé pour cet exemple.
La ligne script.js va charger le javascript que nous allons écrire dans la troisième partie.
Dans le corps de la page, il y a le formulaire à remplir et la div qui affichera la réponse reçue par AJAX.


Réponse

Rien de plus simple pour la réponse, elle ne fait qu’afficher une ligne :

Vous vous appelez <strong><?php echo htmlentities($_POST['nom'].' '.$_POST['prenom'], ENT_COMPAT, 'utf-8'); ?></strong>


Javascript

Le javascript se déroule en deux parties.

La première n’est pas obligatoire, je l’y ai mise juste pour rendre le test plus sympa. Elle permet uniquement d’effacer le contenu d’un champ lorsqu’un rentre dedans pour la première fois.

La deuxième partie est le cœur de notre application, c’est elle qui va capturer l’envoie du formulaire puis l’arrêter :

monForm.addEvent('submit', function(e){
	e.stop();
});

Puis envoyer le formulaire grâce à l’AJAX :

monForm.set('send', {
	onSuccess : function(responseText, responseXML){
		$('resultat').set('html', responseText);
	}
});
monForm.send();


Télécharger

Vous pouvez télécharger l’archive complète de cet article.


Test en ligne

Vous pouvez aussi le tester directement sur internet.

Tagués avec : , , , ,
Publié dans Mootools
8 commentaires pour “Envoyer un formulaire par Ajax avec Mootools
  1. Nom dit :

    Quel talent

  2. fab dit :

    Bonjour

    le lien d e l’archicve complete est dead :-(

  3. Olivier PEREZ dit :

    Le lien est corrigé, merci d’avoir relevé cette erreur.

  4. amine dit :

    Bonjour,
    merci pour l’exemple, je voulais savoir est-ce que c’est ncécessaire de mettre l’attribut action= »resultat.php » ici ?
    peut-on spécifier le fichier php autrement par un url dans la fonction send par exemple ?

    Merci pour la réponse ;)

  5. Olivier PEREZ dit :

    Salut Amine, en effet il est possible de définir ce lien dans le send.

    Essayes quelque chose comme ça :
    monForm.set(‘send’, {
    url: ‘ton-url.php’,
    onSuccess : function(responseText, responseXML){
    $(‘resultat’).set(‘html’, responseText);
    }
    });

  6. olivierD dit :

    bonjour,
    je voulais savoir si c’est normal, quand je valide mon formulaire, que l’affichage remonte en haut de la page?
    Et si oui,y a t il un moyen pour que ça ne se fasse pas?
    Merci
    (j’espere que ce tuto est toujours suivi par l’auteur?)

  7. olivierD dit :

    bonsoir,
    en fait je crois que ma page se recharge ne passe donc pas le formulaire en ajax….

  8. Olivier PEREZ dit :

    Bonjour,
    En effet je lis encore les commentaires du blog. J’étais en vacances et je n’ai pas vu ton message.
    A priori, ce que tu me décris c’est que l’AJAX n’est pas pris en compte. Est-ce que tu aurais un site où je peux voir ce que tu as fait ?
    Essaye de voir si ton Javascript est bien pris en compte (par exemple en insérant des « alert(‘test ligne 53’) » dans ton code)

    Olivier

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*