CODEWITHSUNDEEP
phpajax
hasib
hasib

Reputation: 13

PHP mail sending doesn't works with this ajax code but works fine without ajax code, with echo in my php.I want response in same page

My HTML code. Here above the form I want to show the response like Email is sending, and after that Thankyou message. 

<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
    <div class="form-group">
      <input type="text" name="name" class="form-control" required="required" placeholder="Name"</div>
    <div class="form-group">
      <input type="email" name="email" class="form-control" required="required" placeholder="Email Id"></div>
    <div class="form-group">
      <textarea name="message" id="message" required="required" class="form-control" rows="8" placeholder="Your text here"></textarea></div>                        
    <div class="form-group">
      <input type="submit" name="submit" class="btn btn-submit" value="Submit"></div>
</form>

My PHP code. When I am using echo and without the ajax its working fine. But The response is coming in sendmail.php page. I want ajax response above the form in html page..

<?php 
if(isset($_POST['submit'])){
    $to = "[email protected]"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $name = $_POST['name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $name. " wrote the following:" . "\n\n" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    // echo "Mail Sent. Thank you " . $name . ", we will contact you shortly.";

    die();
    }
?>

My Ajax code

var form = $('#main-contact-form');
    form.submit(function(event){
        event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
            url: $(this).attr('action'),
            beforeSend: function(){
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
            }
        }).done(function(data){
            form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
        });
    });

Upvotes: 1

Views: 30

Answers (1)

edcs
edcs

Reputation: 3879

Your code doesn't send any data to the server and will perform a GET request, so your if(isset($_POST['submit'])) will always return false when an AJAX request is made. You need to update your JavaScript so the form data is serialised:

var form = $('#main-contact-form');

form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        data: $(this).serialize(),
        method: 'post',
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});

You could improve your PHP too, by changing the if to something like this so it just detects the post request:

if($_SERVER['REQUEST_METHOD'] === 'POST'){
   // ...
}

Upvotes: 3

Related Questions