title: send mail (mail to php Post method) using Ajax and jQuery
body: <p>i'm sending mail from my html page by executing a Php function,  my index.html :</p>
  
  <pre><code>  &lt;form method="POST" action="sendmail.php" &gt;
   &lt;input type="text" name="sender_name" placeholder="Name" required=""&gt;
   &lt;input type="text" name="sender_email" placeholder="Email" required=""&gt;
   &lt;input type="text" name="subject" placeholder="Subject" required=""&gt;
   &lt;textarea placeholder="Message" name="message" required=""&gt;&lt;/textarea&gt;
    &lt;input type="submit" name="send" value="SEND"&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>my sendmail.php:</p>
  
  <pre><code>&lt;?php
  if($_POST['send'] == 'SEND'){
  
  $to      = 'queries@mydomain.com';
  $subject = $_POST['subject']; 
  $message = $_POST['message']; 
  $headers = "From: ".$_POST['sender_nam‌​e​']." &lt;".$_POST['sender_em‌​ail‌​']."&gt;\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);
  }
  ?&gt;
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/questions/40792298/perform-post-method-on-current-page">question</a> &amp; this <a href="https://stackoverflow.com/questions/2866063/submit-form-without-page-reloading">question</a></p>
  
  <p>i have to use <strong>Ajax</strong> and <strong>jQuery</strong>? and i know nothing about them so far i have this :</p>
  
  <pre><code>////in my index.html
  &lt;button type="button"&gt;send mail&lt;/button&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;script type="text/javascript"&gt;
  
  
  
      $(document).ready(function(){
          $("button").click(function(){
  
              $.ajax({
                  type: 'POST',
                  url: 'sendmail.php',
                  success: function(data) {
                      alert(data)
                      $("l").text(data);
  
                  }
              });
     });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>i know above is not correct &amp; 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 ???</p>
  
  <p>UPDATE:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>    &lt;form method="POST" id="myForm" action="sendmail.php"&gt;
    &lt;input type="text" name="sender_name" placeholder="Name" required=""&gt;
    &lt;input type="text" name="sender_email" placeholder="Email" required=""&gt;
    &lt;input type="text" name="subject" placeholder="Subject" required=""&gt;
    &lt;textarea placeholder="Message" name="message" required=""&gt;&lt;/textarea&gt;
    &lt;input type="submit" name="send" value="SEND"&gt;
  &lt;/form&gt;
  
  
  
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  
  
    $(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);
  
                  }
              });
     });
  &lt;/script&gt;
      `
  </code></pre>