send mail (mail to php Post method) using Ajax and jQuery
Solution 1
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 = '[email protected]';
$subject = $_POST['subject'];
$message = $_POST['message'];
$headers = "From: ".$_POST['sender_name']." <".$_POST['sender_email'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_email']."\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;
}
?>
Solution 2
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
Solution 3
<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 = '[email protected]';
$subject = $searcharray['subject'];
$message = $searcharray['message'];
$headers = "From: ".$searcharray['sender_name']." <".$searcharray['sender_email'].">\r\n";
$headers .= "Reply-To: ".$searcharray['sender_email']."\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= 'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
Solution 4
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 = '[email protected]';
$subject = $_POST['subject'];
$message = $_POST['message'];
$headers = "From: ".$_POST['sender_name']." <".$_POST['sender_email'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_email']."\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');
}
});
});
});
Related videos on Youtube
remy boys
Updated on June 04, 2022Comments
-
remy boys almost 2 years
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 = '[email protected]'; $subject = $_POST['subject']; $message = $_POST['message']; $headers = "From: ".$_POST['sender_name']." <".$_POST['sender_email'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_email']."\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 over 7 yearsDont 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 ;) -
Jomol MJ over 7 yearsSure..Thank you for notifying me