Envoi de formulaire sans recharger la page

hello, je me décide à poster sur le forum qui, je tient à le préciser, m'as sortit du pétrin plus d'une fois, mais là je ne trouve pas de réponse adéquate.

le problème est simple( enfin pour vous ) je souhaiterais envoyer un formulaire sans rafraîchir la page ( je précise que mon formulaire )

mon code php

<?php
if(!empty($_POST)){
 extract($_POST);
 $valid = true;
 if(empty($nom)){
	 $valid=false;
	 $errornom="tape un nom";
 }
 if(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i",$email)){
 	 $valid=false;
 	 $erroremail="ton email est foireux";
 } 
 if(empty($email)){
	 $valid=false;
	 $erroremail="tape un mail";
 }
  if(empty($message)){
	 $valid=false;
	 $errormessage="tape un message";
 }
 if($valid){
	$to="machin@mail.com";
	$sujet=$nom." m'a envoyé de mail depuis mon site";
	$header="From: $nom <$email>";
	if(mail($to,$sujet,$message,$header)){
		$msg = "j'ai bien reçu ton mail";
		unset($nom);
		unset($email);
		unset($message); 
		}else{
			$msg = "Houston, we've had a problemr";
		}
 }
}
?>

mon formulaire

        <div id="monForm"> <!-- FORM --> 
            <form  id="form" method="post" action="index.php">

            <label>Name:</label>
            <input name="nom"  id="nom" value="<?php if(isset($nom)) echo $nom ?>" >
            <span class="error-form"><?php if(isset($errornom)) echo $errornom ?></span>

            <label>Email:</label>
            <input name="email" id="email" value="<?php if(isset($email)) echo $email ?>" >
            <span class="error-form"><?php if(isset($erroremail)) echo $erroremail ?></span>

            <label>Message:</label>
            <textarea name="message" id="message" ><?php if(isset($message)) echo $message ?></textarea>
            <span class="error-form"><?php if(isset($errormessage)) echo $errormessage ?></span>

            <input type="submit" id="envoyer" value="envoyer" >
          </form>
        <?php 
		if(isset($msg)){ 
		    echo "<p>$msg</p>";
		}
	?>

        </div> <!-- END FORM --> 

au fil de mes recherches sur le grand oueb mondiale, je tombe souvent sur l'utilisation d'Ajax ou jquery (c'est le moment où je ne comprends rien et sollicite votre aide)
merci d'avance
Modifié par biggels (20 Sep 2012 - 19:32)

Tu vas effectivement devoir passer par l'AJAX (un mix de javascript et PHP). Je ne peux t'aider car je suis une bille en AJAX mais arriver à un moment, si on veut s'attaquer à des choses spécifiques comme celles-ci qui demande un nouveau langage, le mieux est de bucher et en apprendre les rouages...
Modifié par Apoooo (20 Sep 2012 - 20:25)

Avec jQuery, il te suffit d'ajouter un évènement onSubmit à ton formulaire. À ce moment tu utilise la fonction serialize() de jQuery pour récupérer les données du formulaire puis tu les envoies via une requête AJAX à la page de traitement qui te retournera probablement des informations relatives au traitement (success/fail).

À noter qu'on ne peut pas envoyer de fichier en AJAX.
(Pour dire vrai c'est maintenant possible via l'API FormData de File Reader de HTML5, mais ce n'est pas le sujet.)