begin process at 2012 02 09 19:34:34
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > ENVOI DE FORMULAIRE AVEC DE L'AJAX

ENVOI DE FORMULAIRE AVEC DE L'AJAX


 Information sur la source

Note :
9,67 / 10 - par 3 personnes
9,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :ajax, prototype Niveau :Débutant Date de création :04/03/2007 Date de mise à jour :06/03/2007 20:01:28 Vu :32 746
Auteur : Klephte

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (23)
Ajouter un commentaire et/ou une note

 Description

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

Source

  • <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> 
<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);}







 Historique

06 mars 2007 20:01:28 :
J'ai retiré une parenthèse génante dans la ligne de code PHP

 Sources du même auteur

Source avec Zip Source avec une capture TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT
Source avec une capture LISTE À CHOIX MULTIPLES
Toutes les sources de Klephte

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture EXPLORATEUR WEB par XtremDuke
Source avec Zip CLASSE AJAX COMPLÈTE par Arto_8000
Source avec Zip PLUGIN BDDR, À INTÉGRER DANS VOS PAGES WEB, PERMET UNE UTILI... par odinh
SIMPLEJS : LIBRAIRIE AJAX COMBINÉE À DES EFFETS VISUELS. par DyoChris
Source avec Zip LIVRE D'OR EN AJAX par capoueidiablo

Commentaires et avis

Commentaire de stfou le 04/03/2007 16:55:37

Super, les sources sur envoyer une requête en ajax existaient déja, mais la c'est un code simplifié pour juste envoyer un formulaire. 10/10

Commentaire de toutphp le 05/03/2007 08:32:57

Salut,

c'est qu'une présentation clair d'un exemple est plus agréable.
Merci à toi de nous le faire partager.
De plus, j'aimerai reprendre ton exemple sur mon site : est-ce possible ?
Je te demande car j'ai traduit la documentation de prototype en français ( à 80%) et je recherche des exemples simple à mettre en place pour concrétiser une documentation quelque peu abstraite.

Avant de donner ton (dés?)accord, va jeter un oeil sur mon site :

http://wiki.sur-la-toile.fr/doku.php?id=prototype
--
Cyril

Commentaire de fidjay le 05/03/2007 14:45:30

moi je comprend pas je reçoi aucun mail, j'ai bien le message de validation mais apres essaye sur plusieur boite rien arrive...

Commentaire de toutphp le 05/03/2007 14:50:43

Ce que je te propose :

essaye de voir ta configuration de ton php. Il faut qu'il soit paramétré correctement pour que la fonction mail existe.
Sinon sur la ligne onFailure :

onFailure: function(data){alert(data);};

au moins tu aurais le droit de voir les erreurs PHP, si il y en a.

Commentaire de fidjay le 05/03/2007 15:09:05

merci de ton aide, Ma fonction mail est bien activé, avec onFailure: function(data){alert(data);}; aucun message et aucune action, le bouton ne se met plus en attente et pas de message de validation...

Commentaire de fidjay le 05/03/2007 15:25:16

Sa marche nikel, enfaite une parenthese de trop se balade sur la ligne de la page FormContact.php
$HTTP_POST_VARS["message"])

Commentaire de toutphp le 05/03/2007 15:26:50

Effectivement ! bien joué !

Commentaire de toutphp le 05/03/2007 15:31:30

Ce qui est quand même bizarre c'est que tu n'ai pas eu d'alerte javascript avec une erreur PHP, Genre :

<b>error line xx</b> : missing ')' ......

Commentaire de Klephte le 06/03/2007 20:13:59

Dear TOUTPHP,
Je te remercie de prendre la précaution de me demander mon accord sur la réutilisation de cette exemple, je te répondrai donc que je serais très content qu'il soit réutilisé à titre d'exemple et surtout sur ton site.

Commentaire de toutphp le 06/03/2007 21:55:15

Klephte,

merci de ton accord, je dois bien t'avouer que je me doutais de ta réponse !
C'est pour ça que j'avais antcipé ... :D

Si tu as d'autres exemple, n'hésite pas à me les envoyer !

Commentaire de stfou le 09/04/2007 17:46:45

Pour une description de l'erreur en plus de son code :
'ERROR '+response.status+' : '+response.statusText';

Commentaire de stfou le 09/04/2007 17:48:57

Aussi, plutot que de faire et visibility="hidden" et display="none", fais-en un seul des deux. (je te conseil display="none")

Commentaire de gregooo1212 le 19/04/2007 11:39:58

Merci pour ce 'ifique formulaire!

Seuleument, ça ne marche pas tiptop chez moi...
-apres le clic sur le bouton "Envoyer", les champs se grisent... mais restent bloqués dans cet état.
-le message de confirmation n'apparait pas
-le message est bien envoyé à mon adresse mail mais sans aucun contenu!

Si quelqu'un à une explication, j'en serais ravis!

Commentaire de gregooo1212 le 19/04/2007 15:34:24

HEU... OUps!

oui...heu, en fait, je n'avais pas séparé le php de l'html :)

promis, j'me donne une baffe!

Commentaire de gregooo1212 le 20/04/2007 12:53:35

une petite question...

j'ai rajouté à ce formulaire un champs "nom".
J'aimerais que le contenu de ce champs soit visible dans le corps du mail de destinataire.

Il y a-t-il une astuce?

Commentaire de Proph_be le 05/09/2007 22:05:03

Salut, ne serait-ce pas mieux d'utiliser l'option 'onComplete' plutot que onSuccess ?

Commentaire de Klephte le 05/09/2007 22:20:02

Salut,
D'après la doc, l'événement onComplete est appelé sans condition à la fin de l'exécution d'Ajax.Request alors que le traitement onSuccess est quant à lui appelé uniquement en cas de réussite. Mon but étant de confirmer de bon envoi du message, la méthode la mieux adaptée est bien le traitement de l'événement onSuccess.

Commentaire de Proph_be le 06/09/2007 11:09:16

Ok, merci bien pour l'info et pour ce script qui est vraiment sympa pour comprendre :)

Commentaire de Proph_be le 10/09/2007 11:53:02

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

Commentaire de Klephte le 10/09/2007 13:12:50

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.

Commentaire de zabiru le 08/01/2008 20:13:12

Merci beaucoup pour cette source! C'est exactement ce qu'il me fallait.

Commentaire de jamelisi le 03/02/2009 15:59:56

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?

Commentaire de orugari le 05/04/2011 15:19:34

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...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Prototype periodicalUpdater et Internet explorer ! [ par monoski ] Voilà j'ai plusieurs valeurs à actualiser j'utilise donc prototype.js et la fonction Ajax.PeriodicalUpdater. Voici le code : [code=js] new Ajax.Perio Champs texte et liste déroulanteliés par ajax [ par shonguiz0 ] Bonjour, je ne suis pas du tout familier avec le langage ajax ( et donc js aussi) mais voilà on m'a fait comprendre que pour mon problème, ajax est responseText ne renvoi rien [ par Orel88 ] Bonjour, J'étais en train de faire un bout de code ajax pour incrémenter une base de donnée lors d'un clic d'utilisateur mais mon responseText ne ren Tres Urgent cherche un Formulaire avec les controle d'Ajax suivant [ par ikbel1992 ] Salut à tous C'est une affaire hyper urgente j'ai que 2 journée pour résoudre ce probléme . Je veux créer un Formulaire avec les Controle de saisie s Modélisation file d'attente de commande avec html/ajax/mysql [ par soumsoumdu06 ] Salut à tous, je souhaiterai développer une file de commande (FIFO premier entré, premier sorti). J'ai une table Mysql (ID++(n°commande)|Date|Nom|Prén Image.prototype.MaMethode [ par paillekane ] Bonjour à tous, Voilà je cherche à ajouter des propriétés et méthodes à l'objet Image. Voici un bout de code : [code=js]//Ajout de propriétés et méth affichage dynamique d'une base de données avec ajax/php [ par cyrilherve ] salut à tous, je suis debutant en ajax, et mon soucis est le suivant: sur la meme page j ai deux div. le premier doit etre visible et contient un cha Probleme Envoi Mail Ajax [ par olivier93612 ] Bonjour, j'ai suivi ce tuto : http://www.javascriptfr.com/codes/ENVOI-FORMULAIRE-AVEC-AJAX_41732.aspx Mais je ne reçois aucun mail alors que le messag Insérer une réponse ajax dans une variable globale [ par themagician67 ] Bonjour, Je cherche à passer le résultat d'une requête ajax dans une variable mon code mais je n'y arrive pas. Voici mon code : [code=js]var tokens2


Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,045 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)