发送表格而不离开页面

时间:2010-11-20 13:52:32

标签: jquery ajax forms

我正在使用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的陡峭学习曲线上!任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

您可以轻松找到所需内容here

jQuery DOCS