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.

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

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 3 mars 2008
Statut
Membre
Dernière intervention
5 avril 2011

Bonjour,
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...
Messages postés
2
Date d'inscription
vendredi 15 décembre 2000
Statut
Membre
Dernière intervention
3 février 2009

j'ai un problème :ce message d'erreur est affiché:

$ is not defined
[Break on this error] $('BTsubmit').value='en cours ...';
COMMENT JE FAIT?
Messages postés
1
Date d'inscription
jeudi 9 août 2007
Statut
Membre
Dernière intervention
8 janvier 2008

Merci beaucoup pour cette source! C'est exactement ce qu'il me fallait.
Messages postés
21
Date d'inscription
mardi 20 mai 2003
Statut
Membre
Dernière intervention
7 octobre 2011

Comme tu le signales fort bien, le header de la requête doit obligatoirement contenir multipart/form-data, ne l'ayant pas trouvé dans le code source de Prototype.js, je ne peux qu'en déduire que l'upload de données binaires n'est pas implémenté dans Prototype de plus s'agissant de l'accès par des scripts JS à des ressources locales, la faisabilité pour des raisons de sécurité me semble fort incertaine , bien que cet exemple http://www.captain.at/ajax-file-upload.php semble prouver le contraire.
Messages postés
3
Date d'inscription
mardi 24 avril 2007
Statut
Membre
Dernière intervention
10 septembre 2007

Sauriez vous égallement comment faire pour envoyer un formulaire contenant des fichiers (cad ayant un enctype 'multipart/form-data' ?
Afficher les 23 commentaires

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.