我似乎无法让我的表单成功发送电子邮件

Question

This is my first time creating a website combining AJAX, JavaScript, PHP, and HTML. Basically, I have a modal that pops up when you click "contact me" with a form inside. The reason I've chosen to use AJAX is because I don't want the page to refresh or remove the modal. I just want it to say something simple afterwards inside the modal.

My problem is, I don't receive the email from the form once I hit submit, and when I trace the emails sent to my address from my server, they don't even show up. This isn't my first time building a web form or using PHP/HTML, so I'm convinced the problem has to be with the AJAX.

So, here is what I have, and I can't seem to figure out why it won't work...

PHP:

<?php
$email_to="[e-mail]";
$email_subject="Form Submission";

$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];

function clean_string($string)
{
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad,"",$string);
}

$email_message .= "Name: ".clean_string($name)."
";
$email_message .= "E-Mail Address: ".clean_string($email)."
";
$email_message .= "Message: ".clean_string($message);

$headers='From: '.$email."
".'Reply-To: '.$email."
".'X-Mailer: PHP/'.phpversion();
@mail($email_to,$email_subject,$email_message,$headers);
die();
?>

Javascript/AJAX:

function submitForm() {
    var request;
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    console.log(name);
    console.log(email);
    console.log(message);

    var the_data = "name="+name+"&email="+email+"&message="+message;

    if(window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    /* My attempt to try some jQuery.... Didn't work either
    $.ajax({
        type: "POST",
        url: "formsubmit.php",
        data: { name: $('#name'), email: $('#email'), message: ('#message') }           
            })*/

    request.open("POST","formsubmit.php", true);
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(the_data);
    $('#contactform').fadeOut();
    $('#contactsuccess').fadeIn();
}

Also the submit button, just in case that is an issue...

<button type="submit" class="btn btn-primary" onClick="submitForm()"><i class="icon-ok icon-white"></i> Submit!</button>

Edit: Also, I'm having trouble with this same code in that it refreshes the page, the exact thing I didn't want it to do. Due to this, I can't see my Javascript console or anything. I assumed AJAX would remove the refresh but it hasn't. How do I fix this as well?

Answer 1

As you're using jQuery for fetching inputs values, use $.ajax() instead of XMLHttpRequest. Your first approach (now commented) didn't work because you were using the object instead of the value ( $('#name') vs $('#name').val() ).

The page will reload because there is no return value. Use

<button type="submit" class="btn btn-primary" onClick="return submitForm();"><i class="icon-ok icon-white"></i> Submit!</button>

And also add return false; at the end of your function.

To see if there is a problem with your PHP script, I suggest the following:

1. Add error_reporting(E_ALL); at the beginning of your file
2. Remove @ of your mail function

3. In your JS function:

   $.ajax({
       [...]
       success: function(msg) {
           alert(msg);
       }
   });