jQuery, AJAX PHP联系人表单


jQuery, AJAX PHP Contact Form

我一直在通过线程后的线程,希望解决这个问题,但没有运气,基本上我有一个非常简单的联系形式,它的工作很好,但当我试图使它通过jQuery AJAX处理没有电子邮件发送到成功的回调触发器。

阻止它工作的事情是所有的代码都在同一页上(index.php),没有单独的页面为表单过程PHP,所以现在所有的代码都在同一页上,我不得不在PHP if (!empty($_POST['contact-submit'])) {}周围添加一个if语句,如果PHP从自己的文件调用,我就不必这样做了。我不希望PHP在一个单独的文件上,一切都需要在一个页面上,如果有人有任何想法,在所有如何通过这个我将感激它很多,因为这是驱使我发疯!

HTML:

<form class="contact-form island" method="post" action="">
  <ul class="form-fields">
    <li>
      <label>Your Name</label>
      <input class="text-input" type="text" name="name" required value="TEST NAME">
    </li>
    <li>
      <label>Your Email</label>
      <input class="text-input" type="email" name="email" required value="email@gmail.com">
    </li>
    <li>
      <label>Subject</label>
      <input class="text-input" type="text" name="subject" required value="TEST SUBJECT">
    </li>
    <li>
      <label>Message</label>
      <textarea rows="7" name="message" required>MESSAGE</textarea>
    </li>
    <li>
      <input class="submit-input" type="submit" value="Send" name="contact-submit">
    </li>
  </ul>
</form>
PHP:

<?php
  if (!empty($_POST['contact-submit'])) {
    $name = trim(stripslashes($_POST['name'])); 
    $email = trim(stripslashes($_POST['email'])); 
    $subject = trim(stripslashes($_POST['subject'])); 
    $message = trim(stripslashes($_POST['message'])); 
    $email_from = $email;
    $email_to = 'email@gmail.com';
    $body = 'Name: ' . $name . "'n'n" . 'Email: ' . $email . "'n'n" . 'Subject: ' . $subject . "'n'n" . 'Message: ' . $message;
    $success = mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
    echo '<p>Email Sent!</p>';
  }
?>
jQuery:

$(function() {
  var form = $('.contact-form');
  form.submit(function () {
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
      success: function() {
        $.fancybox({'content': 'Email Sent!'});
      }
    });
    return false;
  });
});

我很无聊,我根据你和我的一点代码做了一个工作:http://pastie.org/private/zsh9jqej1zkdpeouditww

几个快速注释:它会根据用户提交的内容给用户反馈,所以如果有些内容是空白的,它会把它踢回去,让用户重试。我在这里放了一个"loading image"以防你想用。本质上是为了防止人们乱按按钮。在我的服务器上,click =>几乎立即返回,但这并不意味着总是这样。

在jQuery-ajax部分:url: form.attr('action')指向表单中的动作属性,但在html-form中该属性为空。

<form class="contact-form island" method="post" action="">