Envoyer le formulaire sans quitter la page

Question

J'utilise jQuery pour superposer une division avec une petite forme, mais la façon dont le formulaire traite envoie les utilisateurs en dehors de la page, je me demandais juste ce que je devrais ajouter à le faire appeler le script, envoyer l'information mais ne pas s'éloigner de la page et afficher un petit message de remerciement dans la div avant la fermeture?

Voici mon codage pour la div qui comprend la forme:

<script> 
jQuery(document).ready(function() { 
    jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',}); 
}); 
</script> 

<div class="home-block"> 
    <div class="home-block-content"> 
    <div class="home-block-col1"> 
     <h2>call us</h2> 
     why not call our friendly designers or let us call you... <span class="callus">0845 6808107</span><br> 
     <a href="#" rel="#callback" class="simpledialog">request a call back</a></div> 
    <div class="home-block-col2"><a href="#" rel="#callback" class="simpledialog"><img src="{{skin url=""}}images/media/callus.png" border="0" alt="call us" /></a></div> 
    </div> 
    <div class="clear-block"><br> 
    </div> 
</div> 
<div class="simple_overlay" id="callback"> Please enter your details and we will call you back...<br /> 
    <br /> 
    <form id="form" name="form" method="post" action="forms/callbackscript.php"> 
    <div class="callback-label">Name:</div> 
    <div class="callback-field"> 
    <input name="name" type="text" size="25" class="callback-input"></div><div class="clear-block"></div> 
    <div class="callback-label">Phone Number:</div> 
    <div class="callback-field"> 
    <input name="phone" type="text" size="25" class="callback-input"></div><div class="clear-block"></div> 
    <div class="callback-label">Callback time*:</div> 
    <div class="callback-field"> 
    <select name="howsoon" class="callback-select"> 
    <option value="ASAP">As soon as possible</option> 
    <option value="AM">AM</option> 
    <option value="PM">PM</option> 
    </select></div><div class="clear-block"></div> 
    <div class="callback-label">Your Question:</div> 
    <div class="callback-field"> 
     <textarea name="question" cols="27" rows="3" class="callback-input"></textarea><div class="clear-block"></div> 
    </div> 
<div class="callback-label"></div><div class="callback-field"> 
<input type="submit" name="Submit" value="Submit" /> 
    </form></div><div class="clear-block"></div> 
<div class="note">*Please note we can only call back between the hours of 8-5 Monday-Friday and 9-1 on Saturday</div> 
<div class="clear-block"></div> 
</div> 

Voici le contenu du fichier formulaires/callbackscript.php:

<?php 
    $name   = $_POST['name']; 
    $phone   = $_POST['phone']; 
    $question  = $_POST['question']; 
    $howsoon  = $_POST['howsoon']; 

    $headers = "Content-Type: text/plain; charset=iso-8859-1\n"; 
    $headers .= "From: $name"; 
    $recipient = "sales@ouremailaddress.com"; 
    $subject = "Callback request"; 

    $email_body = " 
    Name: $name 
    Phone: $phone 
    Preferred Time: $howsoon 
    ------------------- 
    Message and/or Details: $question "; 

    mail($recipient, $subject, $email_body, $headers); 

?> 

Je suppose qu'il va être une sorte de fonction ajax mais toujours sur une courbe d'apprentissage raide pour jQuery en ce moment! Toute aide serait grandement appréciée.

Answer 1

Vous pouvez facilement trouver ce que vous cherchez here

jQuery DOCS