begin process at 2010 02 09 22:36:32
  Trouver un code source :
 
dans
 
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 :24 504

Auteur : Klephte

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (22)
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

 Sources de la même categorie

Source avec Zip Source avec une capture CALCULS RAYNAUX V2 par Ali Bibi
Source avec Zip Source avec une capture VALIDATION D'UN FORMULAIRE par grarestephane
Source avec Zip Source avec une capture CHAT VIRTUEL par grarestephane
Source avec Zip Source avec une capture AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CLASSE AJAX : PROTOTYPE ROCKS ! par ralecul
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

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?

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

[AJAX+DIV] Probleme de positionement de basile "<DIV>" [ par frostie ] Boujour tout le monde, Je suis en train de developper une application PHP/AJAX (Asynchronous JAvascipt Xml) qui utilise beaucoup les balises &lt;DIV& AJAX ? [ par tony1239456 ] Bonjour, je suis tr&#232;s int&#233;ress&#233; par la nouvelle forme de progrzmmation AJAX. J'ai vu des scripts en action et sa m'a beaucoup pl&#251; Ajax bug userInteractive = 3 [ par littlebigfox ] Bonjour a tous!J'ai un petit souci, j'espere que quelqu'un peu m'aider, je ne comprend absolument pas. C'est tout bete, j'ai creer un objet xmlhttpreq Ajax et champs file [ par f6xara ] J'ai d&#233;velopper un site en Ajax. L'administration du site se fait &#233;galement en Ajax. Pour la validation de fomulaire, je r&#233;cup&#232;re Rechargement d'objet "AJAX" [ par benjiman2 ] Bonjour !Voila, je commence tout juste a programmer en AJAX ...et voila mon probleme ...Je voudrai que chaque 2 secondes, la page se rafraichisse dans probleme en ajax [ par f6xara ] Bonjour, je cherche le moyen, lors de la validation d'un formualire en ajax a passer un champs type file. Les textareas, textbox et select ne posent p AJAX? Comment faire? [ par hawks_ttf ] Bonjour,Je me demandais comment faire le lien entre le JS et le PHP? Comment depuis un script JS, on peux lancer un requ&#232;te PHP, et comment on r& problème accent en AJAX (pas les classiques ?) [ par madfab ] Bonjour, j'ai cod&#233; des formulaires en AJAX supportant plusieurs pages et d'autres fonctionnalit&#233;. Un jour je me suis aper&#231;u que tous le Ajax et Send [ par syndrael ] Bonjour, J'ai un souci avec Ajax et IE. Mon code fonctionne tr&#232;s bien sous Firefox. Voila le probl&#232;me: J'ai un menu d&#233;roulant qui fait prb avec Ajax (ou incomprension du fonctionnement des FONCTIONS) [ par gomoz ] Je m'essaye aux thechniques Ajax pour me faciliter un peu la vie sur un petit programme php que je veux ameliorer.Il y a juste une chose que j'arrive


Nos sponsors


Sondage...

Comparez les prix


HTC Magic

Entre 429€ et 429€

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

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 : 0,187 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales