I can’t get a successful email form

Question

This is the first time I have created a site combining AJAX, JavaScript, PHP and HTML. Basically, I have a modal that appears when you click "contact me" with the form inside. The reason I decided to use AJAX is because I don't want the page to update or delete the modal. I just want him to say something simple inside the modal.

My problem: I do not receive an email from the form after I click submit, and when I trace emails sent to my address from my server, they do not even appear. This is not the first time I have built a web form or used PHP / HTML, so I am convinced that the problem is related to AJAX.

So, here is what I have, and I can’t understand why this will not 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)."\n"; $email_message .= "E-Mail Address: ".clean_string($email)."\n"; $email_message .= "Message: ".clean_string($message); $headers='From: '.$email."\r\n".'Reply-To: '.$email."\r\n".'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, is a problem ...

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

Edit: Also, I am having problems with the same code, as it refreshes the page, which I don't want to do. Because of this, I cannot see my Javascript console or anything else. I assumed that AJAX will remove the update, but it is not. How to fix it?

Answer 1

When you use jQuery to get input values, use $.ajax() instead of XMLHttpRequest . Your first approach (now commented out) does not work because you used 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 find out if there is a problem with your PHP script, I suggest the following:

• Add error_reporting(E_ALL); to the top of your file
• Remove @ your mail function

• In your JS function:

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

Answer 2

I recommend that you change the last two lines to

 mail(blah) or die('could not send mail'); 

Or, if you do not want this, you should use the exit () function.

But I'm pretty sure you can't just write die (). You either need to do

 mail(blah) or die('could not send email'); 

or you need to use exit () function.