remy boys remy boys - 13 days ago 6
Ajax Question

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

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>
`

Answer

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;
 }
?>