jQuery, PHP & AJAX Issues - php

Question

So I've read the jQuery AJAX pages, and a bunch of tutorials, but am having a slight problem over here.
There are no errors, or warnings, just a blank page.
I am trying to send an email when the user fills in the newsletter subscription test field with their email address, and when you click submit, the page refreshes! (1st problem) and it fails to display anything on the page (second problem), all you see is just a blank page. No emails were received.
I've tested the email script separately, which works fine. I've been using for months with different sites so I know it works.
I've tried changing things around in jQuery etc but nothing has helped fix this problem.
jQuery:
$(function () {
var txt = $('.email').val();
$.ajax({
url: 'index.php',
type: 'post',
data: {
email: txt
},
success: function (data) {
alert(data);
},
error: function (err, req) {
$('#Response').html({
"Somethin' got broked. Please try again."
});
}
});
});
PHP:
<?php
if($_POST["email"] != null)
{
require_once "Mail.php";
$email = $_POST["email"];
// Send it.
$from = "X#X.com.au";
$to = $email;
$subject = "Newsletter Subscription Request.";
$body = "Thank you for subscribing to our newsletter!";
$host = "mail.X.com.au";
$username = "no-reply#X.com.au";
$password = "X";
$headers = array ('From' => $from,
'To' => $to,
'Subject' => $subject);
$smtp = Mail::factory('smtp',
array ('host' => $host,
'auth' => true,
'username' => $username,
'password' => $password));
$mail = $smtp->send($to, $headers, $body);
}
?>
HTML:
<h4 id="Response">Stay informed. Subscribe to our Newsletter!</h4>
<form class="newsletterForm" action="index.php" method="post">
<input type="text" class="email" name="email" />
<input type='submit' class="btn" value="Subscribe" />
</form>
Can someone please help me figure out why this won't work?
Thank you

Answer 1

The 1st thing I do when stuff like this isn't working is to watch the page calls in the Chrome Developer Tools window.
As far as your code goes, the reason the page is refreshing is because the form submit is going through. To keep that from happening, you have to trap the form submit:
$("form").submit(function() {
// Do ajax
return false; // Keeps the form from submitting
});
Once you have that in place, you should be getting better results.
I would caution, however, that it is much easier to get the PHP email sending form working without using ajax at first by just having it handle the regular form submit. Once that works, then tie in the ajax on top of it.

Answer 2

With the following line you suppose to receive an answer from the PHP Script
success: function(data) {
alert(data);
}
But in the PHP script you don't output anything...Try writing something like
//[...]
$smtp = Mail::factory('smtp',
array ('host' => $host,
'auth' => true,
'username' => $username,
'password' => $password));
$mail = $smtp->send($to, $headers, $body);
die(1);

Answer 3

please try this surely you can get the problem solve.
function FormSubmit()
{
$.ajax({
type: "POST",
url: 'index.php',
data: $("#form_main").serialize(),
async: false
}).done(function( data ) {
$("#Response").hide();
if (isNaN(data))
{
dispmsg = "<div class='alert alert-danger' role='alert'>Oops..Something had gone wrong! Please try again!</div>";
$("#assess_me_response").html(dispmsg);
setTimeout('ResetForm();',3000);
}
else
{
dispmsg = "<div class='alert alert-success' role='alert'>Thank you for sharing the details. Our Consultant will contact you shortly!</div>";
$("#assess_me_response").html(dispmsg);
setTimeout('Redirect();',3000);
}
return true;
});
}
make your php as this..
<?php
$to = "xxxx#some.com";
$name = $_POST['name'];
$email = $_POST['email'];
$age = $_POST['age'];
$phone = $_POST['phone'];
$subject = "Entry received";
$msg = "\n Name:" . $name . "\n Email id:" . $email ."\n Age:". $age . "\n Contact number: " . $phone;
$headers = "From:xxx#yyy.com";
mail($to,$subject,$msg,$headers);
echo "<div align='center'>Thank you " . $name . "!, we will contact you shortly.</div>";
?>
try this you can solve.