Envoi de formulaire avec de l'ajax

Commenter

Contenu du snippet

Un exemple simple d'utilisation du Framework Ajax 'Prototype' pour l'envoi de formulaire.

Source / Exemple : 


<html>
<head>
<title>Formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="prototype.js"></script>

// La page FormContact.php ne contient qu'une seule ligne !
// <?php
// mail("destination@domaine.fr","formulaire de contact du site",$HTTP_POST_VARS["message"],"From: ".$HTTP_POST_VARS["email"]);
// ?>

<script type="" language="javascript">
function SendForm(){
	$('BTsubmit').disabled='disabled';
	$('BTsubmit').value='en cours ...';
	$('message').disabled='disabled';
	$('email').disabled='disabled';

	new Ajax.Request('FormContact.php',{
		method: 'post',
		asynchronous: true,
		contentType:  'application/x-www-form-urlencoded',
		encoding:     'UTF-8',
		parameters: { email : $F('email'),message: $F('message')},
		onSuccess: function(){MailOK();}, 
		onFailure: function(){}
	});

	function MailOK(){
		$('BTsubmit').style.visibility = 'hidden';
		$('BTsubmit').style.display = 'none';
		$('textOK').style.visibility = 'visible';
		$('textOK').style.display = 'block';
	}
}
</script>

</head>

<body>
<form>
	Entrez votre adresse e-mail :<br />
	<input id="email" value="" size="30" maxlength="100">
	<br />
	<br />
	Votre message :<br />
	<textarea id="message" cols=30 rows=4 wrap="VIRTUAL"></textarea>
	<br />
	<br />
	<input id="BTsubmit" style="BACKGROUND-COLOR: #cccccc" type=button value="Envoyer" onclick="SendForm()" >
	<div id="textOK" style="visibility: hidden; display: none">votre message a bien été envoyé<br>merci</div>
	</strong>
</form>
</body>
</html>

Conclusion :


Le fichier prototype.js est à télécharger sur le site de prototype à l'adresse suivante http://www.prototypejs.org/.
Pour des raisons de simplicité, je ne traite pas l'éventuelle erreur (HTTP <> 200) retournée par la page FormContact.php.
En cas de besoin, le contenu de cette page peut être obtenu par onFailure: function(response){alert(response.responseText+' '+response.status);}

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Klephte)