Forums Développement Multimédia

Aller au contenu

Formulaire html/php chargé par Ajax

CODE Ajax JQuery EaseJs

1 réponse à ce sujet

#1 lapomme

    Ceinture Blanche

  • Members
  • Pip
  • 12 messages

Posté 07 June 2008 - 16:13 PM

Bonjour,

J'ai un méga soucis avec un formulaire! Je m'explique:
J'ai un formulaire tout simple nom/mail/sujet/message
et je souhaite que lorsque je clique sur envoyer cela ne charge pas la page "verif.php" (ou se trouve mon code php pour l'envoi du mail) mais la charge au sein de la div qui contient le formulaire.
J'utilise donc Ajax pour réaliser ça... mais... ça marche pas. :/

Voici le code:

-page du formulaire:

<h4>Formulaire en ligne:</h4> 
<div id="form"> 
<form method="POST" onSubmit="load_form(this.?verif);return false;" id="formail"> 
<input type=hidden name=subject value=formmail> 
<div class="text"> 
<div>Nom: <input type="text" class="form" value="" name="nom"></div> 
<div>E-mail: <input type="text" class="form" value="" name="mail"></div> 
<div>Sujet: <input type="text" class="form" value="" name="titremessage"></div> 
<div>Message: <textarea rows="5" cols="25" class="textarea" name="mess"></textarea></div> 
<div> 
<a href="#form" onclick="document.getElementById('formail').reset()">Annuler</a> 
<a href="#" onclick="document.getElementById('formail').submit()">Envoyer</a> 
</div> 
</div> 
</form> 
</div> 

-page verif.php

<div> 
<? 
$headers="De: ".$nom; 
$message="Sujet: ".$titremessage." Message: ".$mess." De: ".$nom." (".$mail." )"; 
mail("monmail@monsite.com",$titremessage,$message,$headers); 
echo ('Votre message a bien été envoyé'); 
?> 
</div> 

_fonction ajax

function load_form(select) { 
var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest 
xhr2.onreadystatechange = function(){ 
if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini 
if(xhr2.status  != 200){//Message si il se preoduit une erreur 
document.getElementById("form").innerHTML ="Erreur code " + xhr2.status; 
} else {//On met le contenu du fichier externe dans la div "main" 
var c= document.getElementById("form"); 
c.innerHTML = xhr2.responseText; 
            var allscript = c.getElementsByTagName('script'); 
            for(var i=0;i< allscript.length;i++){ 
            eval(allscript[i].text); 
               } 
} 
} else {//Message affiché pendant le chargement 
document.getElementById("form").innerHTML = "Chargement en cours ...<br /><img src='./images/images/loading.gif' alt=''/>"; 
} 
} 
xhr2.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe 
xhr2.send(null); 
} 

Je planche dessus depuis trop de temps en ayant essayé trop de choses sans succès je commence à devenir sénile je crois!
Merci de votre aide!
Antho.

#2 lapomme

    Ceinture Blanche

  • Members
  • Pip
  • 12 messages

Posté 08 June 2008 - 11:19 AM

Je vais me répondre à moi même...

ajax.js
function new_xhr(){ 
var xhr_object = null; 
if(window.XMLHttpRequest) // Firefox et autres 
   xhr_object = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
   try { 
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP"); 
            } catch (e) { 
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
            } 
} 
else { // XMLHttpRequest non supporté par le navigateur 
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
   xhr_object = false; 
} 
return xhr_object; 
} 
function envoiformulaire() { 
var xhr3 = new_xhr();//On crée un nouvel objet XMLHttpRequest 
xhr3.open("POST", "verif.php", true);//Appel du fichier externe 
xhr3.onreadystatechange = function (){ 
if ( xhr3.readyState == 4 ){//Actions executées une fois le chargement fini 
if(xhr3.status  != 200){//Message si il se preoduit une erreur 
document.getElementById("form").innerHTML ="Erreur code " + xhr3.status; 
} else {//On met le contenu du fichier externe dans la div "form" 
document.getElementById("form").innerHTML = xhr3.responseText; 
} 
} else {//Message affiché pendant le chargement 
document.getElementById("form").innerHTML = "Envoie du message en cours<br /><img src='./images/images/loading.gif' alt='chargement'/>"; 
} 
} 
xhr3.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
xhr3.send("subject="+document.getElementById("formail").value+"&fnom="+document.getElementById("fnom").value+"&fmail="+document.getElementById("fmail").value+"&fsujet="+document.getElementById("fsujet").value+"&fmessage="+document.getElementById("fmessage").value);
} 

verif.php
<?php 
//----------------------------------------------- 
//DECLARE LES VARIABLES 
//----------------------------------------------- 

$nom_expediteur=$_POST['fnom']; 
$email_expediteur=$_POST['fmail']; 
$email_reply=$_POST['fmail']; 
$sujet = $_POST['fsujet']; 
$message = $_POST['fmessage']; 
$destinataire='xxxxxxxx@xxxxxxxx.com'; 

$message_texte='Message: '.$message."\n\n".'Message de: '.$nom_expediteur."\n".'Mail de réponse: '.$email_expediteur; 

//----------------------------------------------- 
//HEADERS DU MAIL 
//----------------------------------------------- 

$headers = 'From: "'.$nom_expediteur.'"<'.$email_expediteur.'>'."\n"; 
$headers .= 'Bcc: <xxxxx@xxxxxxx.com>'."\n"; 
$headers .= 'Return-Path: <'.$email_reply.'>'."\n"; 
$headers .= 'MIME-Version: 1.0'."\n"; 
$headers .= 'Content-Type: multipart/alternative; boundary="'.$frontiere.'"'; 

//----------------------------------------------- 
//MESSAGE TEXTE 
//----------------------------------------------- 
$message = 'This is a multi-part message in MIME format.'."\n\n"; 

$message .= '--'.$frontiere.'--'."\n"; 
$message .= 'Content-Type: text/plain; charset="utf-8"'."\n"; 
$message .= 'Content-Transfer-Encoding: 8bit'."\n\n"; 
$message .= $message_texte."\n\n"; 


if(mail($destinataire,$sujet,$message,$headers)) 
{ 
     echo 'Merci '.$nom_expediteur.' votre message a bien été envoyé.'; 
} 
else 
{ 
     echo 'Désolé '.$nom_expediteur.' mais votre message n\'a pas pu être envoyé. Veuillez recommencer.'; 
} 
?> 

contact.html
<div id="form"> 
<form method="POST" id="formail"> 
<input type=hidden name=subject value=formmail> 
<div class="text"> 
<div class="formlabel i blue">Nom:<input type="text" class="form" id="fnom" value="" name="fnom"></div> 
<div class="formlabel"><span class="i blue">E-mail:</span> <input type="text" class="form" id="fmail" value="" name="fmail"></div> 
<div class="formlabel"><span class="i blue">Sujet:</span> <input type="text" class="form" id="fsujet" value="" name="fsujet"></div> 
<div class="formlabel"><span class="i blue">Message:</span></div> 
<div class=""><textarea rows="5" cols="25" class="textarea" id="fmessage" name="fmessage"></textarea></div> 
<div class="formlink " align="center"> 
<a href="#form" onclick="document.getElementById('formail').reset()">Annuler</a> 
<a href="java script:envoiformulaire()">Envoyer</a> 
</div> 
</div> 
</form> 
</div> 


Cette réponse est fonctionnelle... sympa non, merci de votre contribution wink.gif

Modifié par LaPomme, 08 June 2008 - 11:21 AM.




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP