Send Email with PHP/AJAX From HTML Form - php

I want to send the information the user has filled out from an HTML form to my email address. From my understanding, this cannot be done by using only client-side coding due to the nature of how emails work, and suggested to use PHP (combined with AJAX) to handle the server-side code. I followed the guide here but I am not receiving any emails at my email address. I am testing locally on my machine (using XAMPP) before I deploy my code on my client's web space (goDaddy). I want to note that I have never used PHP before.
Javascript:
var data = "This is my email";
$.ajax({
type: "POST",
url: "email.php",
data: data,
dataType: "text"
});
PHP (email.php):
<?php
$to = "myself#hotmail.com";
$subject = "This is my email";
$message = $_REQUEST;
$send = mail($to, $subject, $message);
if(!$send){
die();
}
?>

XAMPP doesn't have an e-mail sending thing by itself as default. You may check the links below;
php mail setup in xampp
How do I enable XAMPP to locally use the php's mail() function so I can test my mail() scripts locally without having to upload to my server?

You should replace $_REQUEST with $_REQUEST["data"] or something like this, because $_REQUEST is an array.

all time the page is being refreshed. Below is my code:
HTML 5:
<form method="post" data-ajax="false">
<input type="text" name="email" placeholder="jack#example.com, jil#example.com">
<input type="submit" name="submit" value="Invite" class="submitBtn">
</form>
JS:
$('form').bind('submit',function(){
$.ajax({
type : 'POST',
url : 'data/invite.php',
data : $(this).serialize(),
cache : false,
dataType: 'text',
success : function (serverResponse) { alert('mail sent successfully.'); },
error : function (jqXHR, textStatus, errorThrown) {alert('error sending mail');}
});
})
PHP:
<?php
$to = $_POST['mail'];
$name = 'Indusnet Technologies';
$subject = 'Think Recycle';
$text = 'Welcome to our site';
$message =' You received a mail from '.$name;
$message .='Text of the message : '.$text;
if(mail($to, $subject,$message)){
echo 'mail successful send';
}
else{
echo 'there’s some errors to send the mail, verify your server options';
}
?>

var data = "This is my email";
$.ajax({
type: "POST",
url: "email.php",
data: data,
dataType: "text"
});
This Code shoud be like this
var data = "This is my email";
$.ajax({
type: "POST",
url: "email.php",
data: {"data": data},
dataType: "text"
});
and get in code either through $_POST['data'] or $_REQUEST['data']

You probably should return false to the form. Try this:
$('form').submit(function(){
$.ajax({
type : 'POST',
url : 'data/invite.php',
data : $(this).serialize(),
cache : false,
dataType: 'text',
success : function (serverResponse) { alert('mail sent successfully.'); },
error : function (jqXHR, textStatus, errorThrown) {alert('error sending mail');}
});
return false;
})

Related

Read image in a div and send mail using php and jquery

I have a div Which contains images. I have to send mail. I have written following code but Not able to export images this way.
$('#save_btn').click(function() {
save_chart($('#container0').highcharts());
save_chart($('#container1').highcharts());
save_chart($('#container2').highcharts());
var dsimg = $('#imgContainer').html();
var dataString = 'dsimg='+ dsimg ;
$.ajax({
type: "POST",
url: "email_ds.php",
data: dataString,
success: function(){
$('.success').fadeIn(1000);
}
});
});
<?php
if($_POST){
$name = $_POST['dsimg'];
$email = 'xyz#gmail.com';
$message = "success message".$name;
//send email
mail("zyx#gmail.com", "51 Deep comment from" .$email, $message);
}
?>
Mail is working but in the mail no images sent.

blank error ajax post to php file that sends email

I have an ajax call that sends some data (first name, last name, email) to a php file which is supposed to email me. The data I'm sending exists, I've checked that. When I run it however I am getting a blank error. Am I missing something easy? Any advice?
$.ajax({
type: 'POST',
url: 'signup.php',
data: { first_name: 'first_name', last_name: 'last_name', email_address: 'email_address'},
contentType: 'application/json; charset=utf-8',
async: false,
success: (function() {
alert("Successful");
}),
error: (function(data){
})
});
In signup.php I have the following:
<?php
// Get User Information From AJAX Post
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email_address = $_POST['email_address'];
//Set Email Information
$to = 'example#example.com';
$subject = 'New User';
$message = "New User\n$first_name\n$last_name\n$email_address";
$headers = 'From: example#example.com'. "\r\n";
//Send Email
mail($to, $subject, $message, $headers);
?>
Your problems are
You're attempting to post JSON(but not succeeding)
You're attempting to read posted form data though you attempted to post JSON.
I suggest not posting json, but normal url encoded form data, that way $_POST will be populated with the values sent.
If you pass an object in the data field it will be encoded for you so you wont have to doing 'first_name='+encodeURIComponent(first_name)+'&last_name='+encodeURIComponent(last_name)+'&email_address'+encodeURIComponent(email_address)
$.ajax({
type: 'POST',
url: '/signup.php',
data: {'first_name': first_name, 'last_name': last_name, 'email_address': email_address},
async: false,
success: (function() {
alert("Successful");
}),
error: (function(ts){
alert(ts.responseText);
})
});
Also in your php you try some string interpolation(putting variables in a string), but you use single quotes, you have to use double quotes.
$message = "New User\n$first_name\n$last_name\n$email_address";

Execute jQuery script after submitting a form

I want to execute a jQuery script after submitting a form. The jQuery script it's only a line that will fade In a hidden that will show if the e-mail have been sent or not sent.
The PHP code is at the top of the file and I don't know if staying the PHP code at the top is the problem but I tried moving de PHP above the jquery script but it doesn't work.
EDIT:
Now I have that code in my index.php
$(document).ready(function) {
$('form').submit(function) {
$.ajax({
url: "mail.php",
type: "POST",
data: {
name: $('input[name="name"]').val(),
email: $('input[name="email"]').val(),
msg: $('input[name="msg"]').val()
},
cache: false,
success: function(response) {
$('#result').html(response);
}
});
return false;
});
});
In mail.php I have that other code
$name = $_POST['name'];
$mail = $_POST['email'];
$msg = $_POST['msg'];
if(mail('test#test.com', $name, $msg)) {
echo 'Pass!';
} else {
echo 'Fail!';
}
When I executed it nothing happens and the URL shows the data that I wrote in the inputs but any message appears.
Here's a simple example for processing a form with AJAX. Notice the IDs: #emailForm is the ID of the form, and #out is the ID of some HTML element (such as a div or p) where you want to display the result. The function email.php is your server side script to send the email and return the result.
$(document).ready(function() {
$('#emailForm').submit(function(){
$.ajax({
url: "email.php",
type: 'POST',
data: {
name: $('input[name="name"]').val(),
email: $('input[name="email"]').val(),
msg: $('input[name="msg"]').val()
},
cache: false,
success: function(responseText){
$('#out').html(responseText);
}
});
return false;
});
});
On the server side, email.php (or whatever you want to call it) processes the data and sends the email. The data can be retrieved from the $_POST array. After sending or attempting to send the email, email.php can simply echo the result to be inserted in the HTML element with the id of "out."
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
//PUT CODE HERE FOR SENDING EMAIL
if ($success){
echo "Email sent with success!";
} else {
echo "Unable to send your email at this time. Please try again later.";
}
The output should appear in the HTML element:
<div id="out">Email sent with success!</div>
you can use onSubmit attribute in form tag
e.g.
<form name="anything" id="anything" onSubmit="functionname();" >
or the other option is onClick of Submit button
<input type="submit" onClick="functionname();" value="SUBMIT FORM" />
I personally preffer 1st method

Ajax mailer script not working, what to edit?

I'm not receiving any emails, what could be the problem ?
ui.js
sendEmail = function(username, callback) {
var msg = getMessage(username);
$.ajax({
type: 'POST',
url: 'ui.php',
data: '***What should I type here ?***',
success: callback
});
ui.php
<?php
$to = "XXXXXX#gmail.com";
$subject = "you got mail";
$message = $_POST['getMessage'];
$send = #mail($to, $subject, $message);
if(!$send){
die();
}
?>
Data should be a hash with the data. So in your case:
sendEmail = function(username, callback) {
var msg = getMessage(username);
$.ajax({
type: 'POST',
url: 'ui.php',
data: { getMessage : 'Actual message' },
success: callback
});
Also make sure you're defining the callback function what you're using in success-callack. You can leave that away if you're not interested in response.
Also there's a shortcut to post ajax request with POST.

Problem with Jquery AJAX and more than 2 variables

I am trying to add a tell a friend section to a website I am making but I am having difficulty trying to send more than 2 variables through a URL with AJAX. This is the code I have at the moment:
jQuery("#tellafriendsubmit").click(function() {
var email = jQuery('#tellafriendemail').val();
var name = jQuery('#tellafriendname').val();
jQuery.ajax({
type: "POST",
url: "http://www.example.co.uk/tell-a-friend-processor-page/?postname=<?php echo $post_name; ?>&name=name&email="+email,
success: function(msg){
alert('Your tell a friend recommendation has been sent. Thank you for recommending us.');
}
});
});
If I remove the '&name=name' part so that I'm only sending the postname and email address, it works fine but I need to send the name as well so I can write 'Dear $name....'
How can I send the extra 3rd variable? Thanks for any help
Edit:
The part I'm using in the tellafriendprocessor page looks like this:
$email = $_POST['email'];
$post_name = $_GET['postname'];
$name = $_POST['name'];
$to = $email;
$subject = "Example - Tell a friend";
$body = "Dear $name http://www.example.co.uk/ads/$post_name";
if (mail($to, $subject, $body, $headers)) {
} else {
}
You could try sending them as part of the POST request body (using the data property) which will ensure that those values are properly encoded:
var email = jQuery('#tellafriendemail').val();
var name = jQuery('#tellafriendname').val();
jQuery.ajax({
type: 'POST',
url: 'http://www.example.co.uk/tell-a-friend-processor-page/?postname=<?php echo $post_name; ?>',
data: { name: name, email: email },
success: function(msg) {
alert('Your tell a friend recommendation has been sent. Thank you for recommending us.');
}
});
On the server side make sure you are reading them from the $_POST hash ($_POST["name"] and $_POST["email"]).
you can send your parameters to a page with AJAX by GET and POST method with this piece of code
data: { id : 'id', name : 'name' }, // multiple data sent using ajax
Here is an example
$.ajax({
type:"GET",
cache:false,
url:"welcome.php",
data: { id : 'id', name : 'name' }, // multiple data sent using ajax
success: function (html) {
$('#add').val('data sent sent');
$('#msg').html(html);
}
});
You will need to move name outside the string. And to add more key-value-pairs you just append them to the query string: &key=value
url: "http://www.example.co.uk/tell-a-friend-processor-page/?postname=<?php echo $post_name; ?>&name="+name+"&email="+email
Try to use object of params like this:
$.post("/tell-a-friend-processor-page/", { name: "John", email: "<?php echo $post_email; ?>", post_name: "<?php echo $post_name; ?>" },
function(data) {
alert("Data Loaded: " + data);
});

Categories