11499 sujets

JavaScript, DOM et API Web HTML5

Formulaire ajax: améliorations

Bon je reprends depuis le début... et là cela ne fonctionne pas non plus!

J'ai besoin d'aide svp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#envoyer").click(function(){
		nom = $(this).find("input[name=nom]").val();
		email = $(this).find("input[name=email]").val();
		message = $(this).find("textarea[name=message]").val();
		$.post("validation.php",{nom: nom, email: email, message: message},function(data){
			alert("Data Loaded: " + data);
		});
		return false;
	});
});

</script>

<link href="css/style01.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Contact</h1>
<h2>Contactez-nous!</h2>
<hr />

<form method="post" action="#" id="monform">
<label for="nom">Nom:</label><br />
<input type="text" name="nom" id="nom" value="" />
<span class="error-nom"></span><br />


<label for="email">Email:</label><br />
<input type="text" name="email" id="email" value="" />
<span class="error-email"></span><br />


<label for="message">Message:</label><br />
<textarea name="message" id="message" /></textarea>
<span class="error-message"></span><br />


<input type="submit" value="envoyez" id="envoyer" />


</form>
</body>
</html>





et le fichier php:




<?php
	extract($_POST);
	if(empty($nom)){
		echo 'Erreur nom';
		}
	if(empty($email)){
		echo 'Erreur email';
		}
	if(empty($message)){
		echo 'Erreur message';
		}
	
?>



Simple? non ne fonctionne pas: quoi qu'il se passe les valeur renvoyer dans data son erreur nom, message et email!
Modifié par tinourson (21 Aug 2013 - 18:16)
Bonjour,

Alors déjà concernant l'événement je te conseil d'utiliser .submit() au lieu de .click() car on peut très bien valider le formulaire en appuyant sur la touche "Entrée"du clavier. Pour mettre le submit il faut aussi que tu donne un #id a ton formulaire.

Ensuite et cela n'à rien à voir avec le formulaire mais dans un soucis de performance, il est préférable de placer le js non pas dans la balise <head> mais juste avant le </body> car ton js n'a pas besoin d'être chargé avant ton document.

Troisièmement, pour ne pas faire d'erreur de syntaxe et pour te faciliter la vie, jQuery propose la fonction .serialize() 

$(function(){
	$("#idForm").submit(function(){
           var url = "validation.php",
           data = $(this).serialize();
           $.post(url, data, function(data) { alert(data); });
           return false;
        });
});


et pour le php, essai avec $_POST[] directement car je ne suis pas persuadé du extract sur des valeurs non maitrisées :

$message = "ok !";
if (!isset($_POST['nom']) || $_POST['nom'] == "") { $message = "error name"; }
// etc...
echo $message; 
}

Modifié par Chooselife (01 Aug 2013 - 13:46)
Bonjour j'ai enfin fait un formulaire de contact par moi même avec du javascript et ajax.

Tout est testé dans un fichier php à part puis renvoyé...

Vois ci dessous:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

	var $form = $('#monForm');
	
	$('#envoyer').on('click', function() {
		$form.trigger('submit');
		return false;
	});
	$form.on('submit', function() {
		var nom = $('#nom').val();
		var email = $('#email').val();
		var message = $('#message').val();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					
					if(json.valide == false){
						
						if (json.erreurnom == true){
							$('#errornom').html("erreur nom");
							$('#success').html("");
							}else{
							$('#errornom').html("");
							}
							
						if (json.erreuremail == true){
							$('#erroremail').html("erreur email");
							$('#success').html("");
							}else{
							$('#erroremail').html("");
							}
							
						if (json.emailinvalide == true){
							$('#erroremail').html("email invalide");
							$('#success').html("");
						}else if(json.erreuremail == true){
							$('#erroremail').html("erreur email");
							$('#success').html("");
							}else{
							$('#erroremail').html("");
							}
							
						if (json.erreurmessage == true){
							$('#errormessage').html("erreur message");
							$('#success').html("");
							}else{
							$('#errormessage').html("");
							}
						
					}else{
					$('#success').html("succes!");
					$('#errormessage').html("");
					$('#erroremail').html("");
					$('#errornom').html("");
					}
					
					
				}
			});
		
		return false;
	});
});
</script>
</head>

<body>
	<form id="monForm" action="fichier.php" method="post">
    <label for="nom">nom</label>
    <input type="text" id="nom" name="nom" />
    <div id="errornom"></div>
 
    <label for="email">Email</label>
    <input type="text" id="email" name="email" />
    <div id="erroremail"></div>
    
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
    <input type="submit" id="envoyer" value="Envoyer" />
    <div id="errormessage"></div>
    <div id="success"></div>
</form>

</body>
</html>



fichier:php


<?php
$n = array();

if(!empty($_POST)){
	extract($_POST);
		$valid=true;

		if(empty($nom)){
		$valid=false;
		$erreur="Erreur nom";
		$n['erreurnom'] = true;		
		}
		
		if(empty($email)){
		$valid=false;
		$erreur="Erreur email";
		$n['emailinvalide'] = false;
		$n['erreuremail'] = true;
		}elseif(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i",$email)){
		$valid=false;
		$erreur = "Votre email n'est pas valide";
		$n['erreuremail'] = false;	
		$n['emailinvalide'] = true;
		}
	
		if(empty($message)){
		$valid=false;
		$erreur="Erreur message";
		$n['erreurmessage'] = true;
		}
		
		
}else{
	$valid = false;
	
	}
	$n['valide'] = $valid;
	echo json_encode($n);

if($valid = true){
		$to = "lalala@monmail.fr";
		$sujet = $nom." a contacté le site";
		$header = "From: $nom <$email> \n";
		/*
		*A la place
		*$header = "From: lalala@mondomaine.de \n";
		*$header .= "Reply-To: $email";
		*contre le spam auto
		*/
		$message = stripslashes($message);
		$nom = stripslashes($nom);
		if(mail($to,$sujet,$message,$header)){
			$erreur = "Votre email nous est bien parvenu";
			unset($nom);
			unset($email);
			unset($message);
			}
		else{
			$erreur = "Une erreur est survenue. Mail bloqué";
			}
}
	
	

?>


Je voudrais savoir:

Si mon code est affreux ou passable?

Comment améliorer le code?

Que faire si JS est désactivé?


Merci
Sujet clos
Aller à