Envoi de formulaire avec de l'ajax
Soyez le premier à donner votre avis sur cette source.
Snippet vu 38 566 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
- Formulaire ajax php mysql - Guide
- Envois de formulaire ajax ✓ - Forum - Javascript / DHTML
- Formulaire Ajax ✓ - Forum - Javascript / DHTML
- Ajax - un seul appel de fonctions pour faire des liens et soumettre des formulaires - Codes sources - Javascript (Formulaire)
- PHP : Formulaire d'enregistrement(ajax+code securité+stylé) - CodeS SourceS - Guide
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.