Отправка формы без отрыва от страницы

Question

Я использую jQuery для наложения деления на небольшую форму, но способ обработки формы отсылает пользователей со страницы. Мне было просто интересно, что мне нужно было бы добавить, чтобы она вызывала скрипт, отправьтеинформация, но не отойти от страницы и показать маленькое сообщение с благодарностью в div перед закрытием?

Вот мое кодирование для div, который включает в себя форму:

<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>

Вотсодержимое файла forms / 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);

?>

Я предполагаю, что это будет какая-то функция ajax, но в настоящий момент она все еще находится на крутой кривой обучения для jQuery!Любая помощь будет принята с благодарностью.

Answer 1

Вы можете легко найти то, что ищете здесь

JQuery DOCS