Bonjour à tous,
je suis en train de coder mon propre portfolio sur une seule page qui défile (en javascript) et j'ai un problème avec l'envoie de mon formulaire de contact. En effet quand je clique sur le bouton "submit", la page se rafraîchit automatiquement et la personne est renvoyé au début, chose qui n'est pas pratique pour voir les erreurs de validations ou juste pour savoir si le mail a été envoyé ou non.
J'aimerais donc savoir si il y avait une technique assez simple pour éviter le rafraîchissement de la page lors du clique sur le bouton "submit" (je sais qui faut passer par de l'ajax mais je suis débutant dans le domaine).
Voici une partie de mon code:
L'index.php
<form method="post" name="formulaire" class="contactform" action="index.php" id="formulaire">
<div class="inputbloctop">
<div class="inputleft">
<label for="nom" class="username-label">Nom</label>
<input type="text" name="nom" id="nom" maxlength="30" class="ctop" value="<?php if(isset($nom)) echo $nom; ?>" placeholder="Nom"/>
<div class="error-message"><?php if(isset($erreurnom)) echo $erreurnom; ?></div>
</div>
<div class="inputright">
<label for="email" class="email-label">Email</label>
<input type="text" name="email" id="email" maxlength="50" class="ctop" value="<?php if(isset($email)) echo $email; ?>" placeholder="mail@domain.com"/>
<div class="error-message"><?php if(isset($erreurmail)) echo $erreurmail; ?></div>
</div>
</div>
<div class="input textarea">
<label for="message" class="textarea-label">Message</label>
<textarea name="message" clos="30" rows="15" maxlength="2000" id="message" class="cmsg" value="" /><?php if(isset($message)) echo $message; ?></textarea>
<div class="error-message"><?php if(isset($erreurmessage)) echo $erreurmessage; ?></div>
</div>
<div class="submit">
<input type="submit" value="Envoyer" id="envoyer" class="submit" onclick="pop_it(formulaire);"/>
</div>
<input type="text" name="antibot" id="antibot" />
</form>
<div id="contact_form"></div>Le contact.php :
<?php
if(!empty($_POST)){
extract($_POST);
$valid=true;
if($addresse != ""){
}
else{
if(empty($nom)){
$valid=false;
$erreurnom="Vous n'avez pas rempli votre nom";
}
if(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i",$email)){
$valid=false;
$erreurmail="Email non valide";
}
if(empty($email)){
$valid=false;
$erreurmail="Vous n'avez pas rempli votre email";
}
if(empty($message)){
$valid=false;
$erreurmessage="Vous n'avez pas rempli votre message";
}
if($valid){
$to = "monmail@domaine.com";
$sujet = $nom." a contacté le site";
$header = "From: monmail@domaine.com \n";
$header .="Reply-To: $email";
$message = stripslashes($message);
$nom = stripslashes($nom);
if(mail($to,$sujet,$message)){
$reponse = "votre message a bien été envoyé";
unset($nom);
unset($email);
unset($message);
unset($_POST);
$nom="";
$email="";
$message="";
}
else
$reponse = "Une erreur est survenue et votre mail n'a pas été envoyé";
}
}
}
?>et le js :
//ValidContact
$("#envoyer").submit(function(){
valid=true;
if($("#nom").val()==""){
$("#nom").css("border-color","#ff6666");
$("#nom").next(".error-message").text("Veuillez entrer un nom");
valid=false;
}
else{
$("#nom").css("border-color","#009900");
$("#nom").next(".error-message").text("");
}
if($("#email").val()==""){
$("#email").css("border-color","#ff6666");
$("#email").next(".error-message").text("Veuillez entrer un email");
valid=false;
}
else{
if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i)){
$("#email").css("border-color","#ff6666");
$("#email").next(".error-message").text("Veuillez entrer un email valide");
valid=false;
}
else{
$("#email").css("border-color","#009900");
$("#email").next(".error-message").text("");
}
}
if($("#message").val()==""){
$("#message").css("border-color","#ff6666");
$("#message").next(".error-message").text("Veuillez entrer votre message");
valid=false;
}
else{
$("#message").css("border-color","#009900");
$("#message").next(".error-message").text("");
}
var nom = $("#nom").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='reponse'></div>");
$('#reponse').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#reponse').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return valid;
});J'ai utilisé un tuto pour l'ajax mais celui-ci ne fonctionne pas et comme je ne m'y connais pas beaucoup je ne vois pas trop où est le problème. J'espère que vous pourrez m'aider à trouver une réponse à mon problème.
Merci par avance.
Zyow
Pour la requête ajax, à aucun moment tu fais un retour de ce qui c'est réellement passé.
Le success c'est juste pour la requête, par contre tu pourrais faire un retour JSON du genre {"reussi":1} ou {"reussi":0} et après tu l'interprete dans success:function(data){}
Salut,
Je serai toi, juste pour voir si les conditions fonctionnent bien, je mettrai directement à false le valid.
Ca évitera le rafraichissement et tu pourrais peut-être voir le défaut, car si ça rafraichie c'est comme si valid passe jamais à false, donc les if déconne, au moins tu verras ça.
A+
Merci, grâce à ça j'ai trouvé quelques petites erreurs dans mon code.
J'ai remplacé $addresse par $antibot dans contact.php et $("#envoyer").submit(function(){ par $("#envoyer").click(function(){. Grâce à cela le js c'est remis à fonctionner correctement.
Je pense que le problème vient de l'ajax, la réponse Contact Form Submitted apparaît quand je clique sur le submit même si les champs ne sont pas remplis, j'ai l'impression qu'il saute la vérification de l'envoie. Il n'est pas possible de faire une sorte de variable qui fait que si l'email a bien été envoyé le message "message envoyé" apparaît, et le contraire si le message reçoit une erreur?
PS: Un autre petit problème qui se pose à moi, je travail actuellement ne local sous wamp et tout fonctionne. Par contre si j'envois les fichiers sur mon FTP (pour tester l'envoie de mail), le javascript n'est plus reconnu et c'est les variables de contact.php qui prennent le relais. Quelqu’un pourrait m'expliquer pourquoi j'ai un problème de ce genre?
Merci encore.
Merci, je vais chercher dans cette direction.