Envoi de formulaire avec de l'ajax
Soyez le premier à donner votre avis sur cette source.
Snippet vu 38 227 fois - Téléchargée 20 fois
Contenu du snippet
Un exemple simple d'utilisation du Framework Ajax 'Prototype' pour l'envoi de formulaire.
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);}
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
- Formulaire ajax
- Ajax formulaire - Meilleures réponses
- Prototype ajax - Meilleures réponses
- Submit avec une image en Ajax : Envoi de formulaire ✓ - Forum - Javascript / DHTML
- Envoyer un formulaire par mail - Guide
- Envoyer un formulaire avec la fonction mail() au format html (en option) - Codes sources - PHP (E-Mail / Messagerie)
- ASP / ASP.NET : Fixer le choix d'une balise <select> lors d'un envoi de formulaire - CodeS So - Guide
- Javascript : Désactiver un bouton submit après envoi du formulaire - CodeS SourceS - Guide
Commentaires
Je l'ai integre a mon site mais... cela ne donne rien...
En reprenant legerement le code, l'action reste sur "en cours..." et ne fait rien.
//submit
function SendForm(){
$('BTsubmit').disabled='disabled';
$('BTsubmit').value='en cours ...';
$('message').disabled='disabled';
$('email').disabled='disabled';
new Ajax.Request('envoie_message.php',{
method: 'post',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
parameters: { pseudo : $F('pseudo'), time: $F('time'), 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';
}
}
et envoie_message.php
<?
$message = $HTTP_POST_VARS["message"];
$pseudo = $HTTP_POST_VARS["pseudo"];
$time = $HTTP_POST_VARS["time"];
if($message !="")
{
//traitement du message
etc...
Je ne comprends absolument rien...
$ is not defined
[Break on this error] $('BTsubmit').value='en cours ...';
COMMENT JE FAIT?
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.