使用 AJAX 在 PHP 中发送电子邮件

Question

I am trying to send email in PHP using AJAX in a simple contact form. I have the following codes for a simple form, PHP code for submit button and AJAX script.

When I am trying to send email it is not sending any email and always firing the AJAX error msg. I am not very well in AJAX integration with PHP.

Below is my code

 <form method="post" class="myform" action="">
       <input type="text" name="name" placeholder="Your Name" required><br>
       <input type="email" name="email" placeholder="Your Email" required><br>
       <textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
       <input type="submit" name="submit" value="Send"> <span class="output_message"></span>
 </form>

 <?php
     if (isset($_POST['submit'])) {
        $name = $_REQUEST['name'];
        $email = $_REQUEST['email'];
        $message = $_REQUEST['message'];

      // Set your email address where you want to receive emails. 
       $to = 'mymail@gmail.com';
       $subject = 'Contact Request From Website';
       $headers = "From: ".$name." <".$email."> \r\n";
       $send_email = mail($to,$subject,$message,$headers);

       echo ($send_email) ? 'success' : 'error';

  }?>

    <script>
           $(document).ready(function() {
           $('.myform').on('submit',function(){

           // Add text 'loading...' right after clicking on the submit button. 
           $('.output_message').text('Loading...'); 

           var form = $(this);
                $.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serialize(),
                success: function(result){
            if (result == 'success'){
                $('.output_message').text('Message Sent!');  
            } else {
                $('.output_message').text('Error Sending email!');
            }
        }
    });

    // Prevents default submission of the form after clicking on the submit button. 
    return false;   
  });
  });

</script>

Answer 1

I would move the php part to another file:

<form method="post" class="myform" action="">
       <input type="text" name="name" placeholder="Your Name" required><br>
       <input type="email" name="email" placeholder="Your Email" required><br>
       <textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
       <input type="submit" name="submit" value="Send"> <span class="output_message"></span>
 </form>



    <script>
           $(document).ready(function() {
           $('.myform').on('submit',function(){

           // Add text 'loading...' right after clicking on the submit button. 
           $('.output_message').text('Loading...'); 

           var form = $(this);
                $.ajax({
                url: "email.php",
                method: form.attr('method'),
                data: form.serialize(),
                success: function(result){
            if (result == 'success'){
                $('.output_message').text('Message Sent!');  
            } else {
                $('.output_message').text('Error Sending email!');
            }
        }
    });

    // Prevents default submission of the form after clicking on the submit button. 
    return false;   
  });
  });

</script>

And in another email.php

 <?php
     if (isset($_POST['submit'])) {
        $name = $_REQUEST['name'];
        $email = $_REQUEST['email'];
        $message = $_REQUEST['message'];

      // Set your email address where you want to receive emails. 
       $to = 'mymail@gmail.com';
       $subject = 'Contact Request From Website';
       $headers = "From: ".$name." <".$email."> \r\n";
       $send_email = mail($to,$subject,$message,$headers);

       echo ($send_email) ? 'success' : 'error';

  }?>

Answer 2

So, the top answer works, but as @Mithu said, for some reason it always says: 'Error Sending email!' So, after 30 minutes of exploring the situation I understood that for some reason it returns from PHP not 'success' but ' success' with 3 spaces. So, all you need is to exclude these 3 spaces and also to make another if else statement in the PHP to check FALSE instead of TRUE. Here how it looks and works for me:

HTML:

<form method="post" class="myform" action="">
               <input type="text" name="name" placeholder="Your Name" required><br>
               <input type="email" name="email" placeholder="Your Email" required><br>
               <textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
               <input type="submit" name="submit" value="Send"> <span class="output_message"></span>

</form>

JS:

<script>
               $(document).ready(function() {
               $('.myform').on('submit',function(){
    
               // Add text 'loading...' right after clicking on the submit button. 
               $('.output_message').text('Loading...'); 
    
               var form = $(this);
                    $.ajax({
                    url: "email.php",
                    method: form.attr('method'),
                    data: form.serialize(),
                    success: function(result){
                let y = result.substring(3);
                if (y == 'success'){
                    $('.output_message').text('Message Sent!');  
                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });
    
        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
      });
      });
    
    </script>

email.php:

 <?php

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

    $fullmessage = "Sender's name: ".$name."\n"."Message: \n".$message;

  // Set your email address where you want to receive emails.
   $to = 'contact@yourdomain.com';
   $subject = 'Message from YOUR E-MAIL.COM';
   $send_email = mail($to,$subject,$fullmessage,$email);


   if ($send_email == false) {
     echo 'error';
   } else {
     echo 'success';}
   ?>

So, if the original code of @Bolli doesn't work on your website, try this code, it work very well on my side.

Answer 3

You must be stop the default flow of that form by using event.preventDefault(); and you can pass the form as multipart/formdata or form-data and check the developer tools -> network -> fetch/xhr -> payload/ formdata . then you create a seperate page in php and do the mail process in that page and change the form action link to that page

In html

<form method="post" class="myform" action="mail.php">
   <input type="text" name="name" placeholder="Your Name"><br>
   <input type="email" name="email" placeholder="Your Email"><br>
   <textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
   <input type="submit" name="submit" value="Send"> <span class="output_message"></span>
</form>

<script>
         $(document).on('submit', '.myform', function(e){
              e.preventDefault();
           // Add text 'loading...' right after clicking on the submit button. 
           $('.output_message').text('Loading...'); 

           var form = $(this);
                $.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: new FormData($(".myform")[0]),
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(result){
            if (result.status == 'success'){
                $('.output_message').text('Message Sent!');  
            } else {
                $('.output_message').text('Error Sending email!');
            }
        }
    });
</script>

In php - mail.php

if (isset($_POST['submit'])) {
        $name = $_REQUEST['name'];
        $email = $_REQUEST['email'];
        $message = $_REQUEST['message'];

      // Set your email address where you want to receive emails. 
       $to = 'mymail@gmail.com';
       $subject = 'Contact Request From Website';
       $headers = "From: ".$name." <".$email."> \r\n";
       $send_email = mail($to,$subject,$message,$headers);
       if($send_email)
        {
          $response = ['status' => 'success'];
        }
        else
        {
          $response = ['status' => 'error'];
        }
       echo json_encode($response);    
  }