send mail (mail to php Post method) using Ajax and jQuery

Question

i'm sending mail from my html page by executing a Php function, my index.html :

  <form method="POST" action="sendmail.php" >
 <input type="text" name="sender_name" placeholder="Name" required="">
 <input type="text" name="sender_email" placeholder="Email" required="">
 <input type="text" name="subject" placeholder="Subject" required="">
 <textarea placeholder="Message" name="message" required=""></textarea>
  <input type="submit" name="send" value="SEND">

    </form>

my sendmail.php:

<?php
if($_POST['send'] == 'SEND'){

$to      = 'queries@mydomain.com';
$subject = $_POST['subject']; 
$message = $_POST['message']; 
$headers = "From: ".$_POST['sender_nam‌e']." <".$_POST['sender_em‌ail‌'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌il‌']."\r\n"; 
$headers = "Content-type: text/html; charset=iso-8859-1\r\n";
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
?>

the above is working fine but its also leaving current page i wanna execute the above method on current page and for that according to this question & this question

i have to use Ajax and jQuery? and i know nothing about them so far i have this :

////in my index.html
<button type="button">send mail</button>
<p></p>
<script type="text/javascript">



    $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'sendmail.php',
                success: function(data) {
                    alert(data)
                    $("l").text(data);

                }
            });
   });
});
</script>

i know above is not correct & its not working (currently its showing sendmail.php's text in a popup) how can i make it work so that i can execute sendmail.php ???

UPDATE:

index.html

    <form method="POST" id="myForm" action="sendmail.php">
  <input type="text" name="sender_name" placeholder="Name" required="">
  <input type="text" name="sender_email" placeholder="Email" required="">
  <input type="text" name="subject" placeholder="Subject" required="">
  <textarea placeholder="Message" name="message" required=""></textarea>
  <input type="submit" name="send" value="SEND">
</form>



</div>
<script type="text/javascript">


  $(document).ready(function(){
        $("#myForm").on('submit', function(){
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: 'sendmail.php',
                data: formData,
                success: function(response.success) {
                    alert(response.success)
                    $("l").text(response.success);

                }
            });
   });
</script>
    `

Wesley Smith · Accepted Answer · 2016-11-25T07:59:27.157

6

The below should work for you using .on('submit' and .serialize()

HTML

<form method="POST" id="myForm" action="sendmail.php">
  <input type="text" name="sender_name" placeholder="Name" required="">
  <input type="text" name="sender_email" placeholder="Email" required="">
  <input type="text" name="subject" placeholder="Subject" required="">
  <textarea placeholder="Message" name="message" required=""></textarea>
  <input type="submit" name="send" value="SEND">
</form>

JS

$(document).ready(function() {
    $("#myForm").on('submit', function(event) {
        event.preventDefault(); 
        var formData = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: 'sendmail.php',
            dataType: "json",
            data: formData,
            success: function(response) { 
                alert(response.success); 
            },
            error: function(xhr, status, error){
                console.log(xhr); 
            }
        });
    });
});

PHP

<?php
if(isset($_POST['message'])){
    $to      = 'queries@mydomain.com';
    $subject = $_POST['subject']; 
    $message = $_POST['message']; 
    $headers = "From: ".$_POST['sender_nam‌e']." <".$_POST['sender_em‌ail‌'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌il‌']."\r\n"; 
    $headers = "Content-type: text/html; charset=iso-8859-1\r\n";
    'X-Mailer: PHP/' . phpversion();
    if(mail($to, $subject, $message, $headers)) echo json_encode(['success'=>true]); 
    else echo json_encode(['success'=>false]);
    exit;
 }
?>

edited Nov 25 '16 at 07:59

answered Nov 25 '16 at 05:36

Wesley Smith

19,401
22
85
133

is this is how i'm supposed to do it ? please check updated question – remy boys Nov 25 '16 at 05:54
@remyboys Yeah, this should work for your use. Are you having some issue with it or getting an error? – Wesley Smith Nov 25 '16 at 05:56
@remyboys make sure you add the `function(event){event.preventDefault();` bit as shown above, without that, it wont work. I forgot it when I first added my answer but edited it after – Wesley Smith Nov 25 '16 at 05:58
where to add it ? `function(event){event.preventDefault();` @DelightedD0D – remy boys Nov 25 '16 at 06:01
@remyboys add it just like it's shown in the `js` section above and you should be good – Wesley Smith Nov 25 '16 at 06:04
dont know what i' doing wrong but its not working , its redirecting my sendmail.php page but now mail is not delivering anymore – remy boys Nov 25 '16 at 06:17
@remyboys can you post an update with your code with the `preventDefault` bit added? – Wesley Smith Nov 25 '16 at 06:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128997/discussion-between-remy-boys-and-delightedd0d). – remy boys Nov 25 '16 at 06:24
just sent you over chat , please take a look – remy boys Nov 25 '16 at 06:25

Jomol MJ · Answer 2 · 2016-11-25T05:54:19.303

So give and id for your form tag like the following code.

 <form method="POST" action="sendmail.php" id="sendForm">
 <input type="text" name="sender_name" placeholder="Name" required="">
 <input type="text" name="sender_email" placeholder="Email" required="">
 <input type="text" name="subject" placeholder="Subject" required="">
 <textarea placeholder="Message" name="message" required="">  
 </textarea>
 <input type="submit" name="send" value="SEND" id="submitButton">    
 </form>

Then update your script like the following code

    $(document).ready(function(){
        $("#submitButton").click(function(event){
         event.preventDefault();
        var datas = $('#sendForm').serialize();

            $.ajax({
                type: 'POST',
                url: 'sendmail.php',
                data: datas,

                success: function(data) {
                    alert(data)
                    $("l").text(data);

                }
            });
   });
});

Check this url for how to submit form data using ajax

Dont forget to call `event.preventDefault();` or the html form will be submitted via the normal process and the page will refresh before the ajax gets called ;) — Wesley Smith, Nov 25 '16 at 05:48

score 3 · Answer 3 · edited Nov 25 '16 at 07:08

<form id="my_form" method="POST" action="sendmail.php" >
 <input type="text" name="sender_name" placeholder="Name" required="">
 <input type="text" name="sender_email" placeholder="Email" required="">
 <input type="text" name="subject" placeholder="Subject" required="">
 <textarea placeholder="Message" name="message" required=""></textarea>
  <input id="my_button" type="button" name="send" value="SEND">
</form>

jQuery Code

  $(document).ready(function(){
        $("#my_button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'sendmail.php',
                data : $('#my_form').serialize(),
                success: function(data) {

                }
            });
   });

Php code

<?php

$searcharray = array();
parse_str($_POST['data'], $searcharray);
if($searcharray['send'] == 'SEND'){

$to      = 'queries@mydomain.com';
$subject = $searcharray['subject']; 
$message = $searcharray['message']; 
$headers = "From: ".$searcharray['sender_nam‌e']." <".$searcharray['sender_em‌ail‌'].">\r\n";
$headers .= "Reply-To: ".$searcharray['sender_ema‌il‌']."\r\n"; 
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= 'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}

Junius L · Answer 4 · 2016-11-25T06:47:12.053

Hi give your form an id and use JS preventDefault()

<form method="POST" id="myForm" action="sendmail.php">
  <input type="text" name="sender_name" placeholder="Name" required="">
  <input type="text" name="sender_email" placeholder="Email" required="">
  <input type="text" name="subject" placeholder="Subject" required="">
  <textarea placeholder="Message" name="message" required=""></textarea>
  <input type="submit" id="sendMail" name="send" value="SEND">
</form>

sendmail.php

<?php
    if($_POST['send'] == 'SEND'){

    $to      = 'queries@mydomain.com';
    $subject = $_POST['subject']; 
    $message = $_POST['message']; 
    $headers = "From: ".$_POST['sender_nam‌e']." <".$_POST['sender_em‌ail‌'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌il‌']."\r\n"; 
    $headers = "Content-type: text/html; charset=iso-8859-1\r\n";
    'X-Mailer: PHP/' . phpversion();
    //check if the mail was sent
    if (mail($to, $subject, $message, $headers)) {
        echo json_encode(['result' => true]);
    }else {
        echo json_encode(['result' => false]);
     }
   }
?>

jQuery

$(document).ready(function () {
//send button click
$('#sendMail').on('click', function (e) {
    e.preventDefault();
    $.post('sendmail.php', $('#myForm').serialize(), function (data) {
        //show the results if the mail was sent or not
        var res = $.parseJSON(data);
        if (res.result === true) {
           $('#feedback').html('your mail was sent');
        }else {
           $('#feedback').html('your mail was not sent');
        }
    });
});
});

send mail (mail to php Post method) using Ajax and jQuery

4 Answers4

Linked