jQuery, AJAX PHP Contact Form

Question

I've been looking through thread after thread in hope of solving this problem but no luck, basically I have a very simple contact form which works fine, but when I try and make it process through jQuery AJAX no email gets sent yet the success callback triggers.

The thing that's stopping it from working is that all code is on the same page (index.php), there's no separate page for form process PHP, so now all code is on the same page I'm having to add an if statement around the PHP if (!empty($_POST['contact-submit'])) {} which I wouldn't have to if the PHP was being called from its own file. I don't want the PHP on in a separate file, everything needs to be on one page, if anyone has any idea at all how to get past this I would appreciate it a lot as this is driving me crazy!

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;
  });

});

Answer 1

I was bored I made you a working one based on a little of your code and a little of mine: http://pastie.org/private/zsh9jqej1zkdpeouditww

Couple quick notes: It does give feedback to the user based on their submission so if something is blank it kicks it back and lets them retry. I put a "loading image" in there in case you want to use that... In essence to prevent people from spamming the button. On my server it was click => returned almost instantly, doesn't mean that's always the case.

NOTE: Edit line 48 with your PHP file's name.

Answer 2

在jQuery-ajax部分中： url: form.attr('action')指向表单中的action-attribute，但是在html-form中为空。

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