I am setting up an opt-in list for a newsletter. Below is my php script, which is working, but when I receive the email, I can't see the email address in the message, only this:
Email:
How can I get the email variable to display in the email message?
Edit: I'm posting the form using jquery/ajax, that's why there's no post and action in the form.
PHP (newsletter.php)
<?php
$to = "newsletter#example.com";
$subject = "Send me the newsletter";
$email = $_POST['email'];
$email = filter_var($email , FILTER_SANITIZE_EMAIL);
$message = "Email: $email";
mail($to, $subject, $message, "From: no-reply#example.com");
?>
HTML
<form id="newsletter_signup">
<input type="text" name="email" id="email" placeholder="Email Address" /><input type="submit" value="Submit" class="submit_button" />
</form>
jQuery
$.ajax({
type: "POST",
url: "newsletter.php",
data: $("input#email").val(),
success: function() {
$('#signup').html("<div id='message'></div>");
$('#message').html("<h3>Blah, blah, blah!</h3>")
.css({color:"#00000", fontFamily: "Arial", fontSize: "12px"})
.hide()
}
});
Try this:
$.ajax({
type: "POST",
url: "newsletter.php",
data: {"email" : $("input#email").val()},
success: function() {
$('#signup').html("<div id='message'></div>");
$('#message').html("<h3>Blah, blah, blah!</h3>")
.css({color:"#00000", fontFamily: "Arial", fontSize: "12px"})
.hide()
}
});
Also check out jQuery serialize method (you can just type data: $("form").serialize()).
http://api.jquery.com/serialize/
Your from should be
<form id="newlsetter_signup" method="POST" action="">
Related
Update: Final working code is at the very bottom of question I left the rest of the code so you can see the process hope it helps someone in the future.
I am trying to send an email to myself (which is working) using only jQuery and an external php file, however, the email isn't picking up any of the data. I have the following code.
HTML
<section>
<form enctype="multipart/form-data">
<fieldset class="margin-b">
<legend>Contact Me</legend>
<label for="form_name">Name:<input name="form_name" id="form_name" type="text" value="" required autofocus ></label>
<label for="form_email">Email:<input type="email" name="form_email" id="form_email" value=""></label>
<label for="form_msg">Message:<textarea name="form_msg" id="form_msg" rows="5"></textarea></label>
</fieldset>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</section>
JS
var data = {
name: $("#form_name").val(),
email: $("#form_email").val(),
message: $("#form_message").val()
};
$.ajax({
type: "POST",
url: "email-php.php",
data: data,
success: function(){
$('.success').fadeIn(1000);
}
});
PHP
<?php
if($_POST){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
//send email
mail("email#domain.com", "From: " .$email, $message);
}
?>
EDIT: I took the above from various answers on Stack Overflow however couldn't figure out what I am missing or doing wrong. I took most of it from this question here jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined
UPDATE: After #inarilo's suggestion below I have changed everything to the following and now I don't get an email at all. This definitely looks like the better option so I would like to get it to work.
HTML
<section>
<form enctype="multipart/form-data" id="frmemail">
<fieldset class="margin-b">
<legend>Contact Me</legend>
<label for="form_name">Name:<input name="form_name" type="text" value="" required autofocus ></label>
<label for="form_email">Email:<input type="email" name="form_email" value=""></label>
<label for="form_msg">Message:<textarea name="form_msg" rows="5"></textarea></label>
</fieldset>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</section>
JS
$.ajax({
type: "POST",
url: "email-php.php",
data: $("#frmemail").serialize(),
success: function(){
$('.success').fadeIn(1000);
}
});
PHP
<?php
if(isset($_POST['name'],$_POST['email'],$_POST['message'])){
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];
//send email
mail("landon#thecallfamily.com", "From: " .$email, $message);
}
?>
Final Working Code
HTML
<section>
<form enctype="multipart/form-data" id="frmemail">
<fieldset class="margin-b">
<legend>Contact Me</legend>
<label for="form_name">Name:<input name="form_name" type="text" value="" required autofocus ></label>
<label for="form_email">Email:<input name="form_email" type="email" value=""></label>
<label for="form_msg">Message:<textarea name="form_msg" rows="5"></textarea></label>
</fieldset>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</section>
JS
$(document).ready(function() {
$('#frmemail').submit(function(event) {
$.ajax({
type: 'POST',
url: 'email-php.php',
data: $('#frmemail').serialize(),
success: function() {
$('.success').fadeIn(1000)
}
})
})
})
PHP
<?php
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];
$to = "landon#thecallfamily.com";
$subject = "RIA Emails";
$body = "Name: ".$name."\nEmail: ".$email."\nMessage: ".$message;
$headers = "From: " . $email;
//send email
mail($to, $subject, $body, $headers);
?>
You have multiple errors, first of all you are using element ids to pick up the data:
name: $("#form_name").val(),
email: $("#form_email").val(),
message: $("#msg_text").val()
but the input elements themselves have no id attribute defined.
Secondly, you are passing name, email and message, but in your PHP you are using name, email and text:
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['text'];
However, even if correct all this is unnecessarily complicated, you can instead just serialize the form:
In the HTML, add an id to the form:
<form enctype="multipart/form-data" id="frmemail">
In JS, pick up the form and serialize it:
$(document).ready(function(){
$("#frmemail").submit(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "email-php.php",
data: $("#frmemail").serialize(),
success: function(){
$('.success').fadeIn(1000);
}
});
});
});
And in PHP simply use the element names, you don't need ids for them:
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];
you are trying to get textarea value by using wrong id, it should be:
message: $("#form_msg").val()
not
message: $("#form_email").val()
and in php file, replace the following:
$message = $_POST['text'];
with
$message = $_POST['message'];
that's it :)
try this, (supposed you have put id names on you input form)
JQUERY:
$(document).ready(function(){
$('#submit').on('click',function(){
var name = $('#name').val(),
var name = $('#email').val(),
var name = $('#message').val();
$.ajax({
type: "POST",
url: "email-php.php",
data: {name:name,email:email,message:message},
success: function(data){
alert(data);
}
});
});
});
PHP:
if(isset($_POST['name'],$_POST['email'],$_POST['message'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo $name; // then echo $email and then $message
}
I have a PHP form ready, with sucesss message after the form is being sent. Thing is that the message shows after the page is redirected to the phpmailer.php
How can I make the message show after the user clicks submit? My final goal is to make the form disappear and show the thank you message instead.
<?php session_start();
if(isset($_POST['Submit'])) {
$youremail = 'email-here#gmail.com';
$fromsubject = 'domain-here.com';
$name = $_POST['name'];
$mail = $_POST['mail'];
$message = $_POST['message'];
$to = $youremail;
$mailsubject = 'Masage recived from'.$fromsubject.' Contact Page';
$body = $fromsubject.'
The person that contacted you is '.$name.'
E-mail: '.$mail.'
Message:
'.$message.'
|---------END MESSAGE----------|';
echo "Thank you fo your feedback.";
mail($to, $subject, $body);
} else {
echo "You must write a message";
}
?>
Here's the PHP code:
Thanks in advance !
Use ajax in your mail page, make the process page is seperate from the write page. After user clicks 'Send', post the data to the process page and respond with a text message or json data, and show the message on the write page
$.ajax({
url: 'your-url-to-send-mail-page',
type: 'POST',
data: maildata,
async: true,
dataType: 'text',
processData: false,
success: function(data) {
alert(data);
},
error: function(data) {
alert('An error occurs!');
}
});
------UPDATE------
write.php :
<form id="mailForm">
<input type="text" name="Submit" value="" />
<label for="title">Title:</label>
<input type="text" name="title" id="title" value="" />
<textarea name="content" rows="30" cols="50"></textarea>
<button id="sendBtn">Send</button>
</form>
<script type="text/javascript">
var maildata = new FormData($("#mailForm")[0]);
$.ajax({
url: 'send.php',
type: 'POST',
data: maildata,
async: true,
dataType: 'text',
processData: false,
success: function(data) {
alert(data);
},
error: function(data) {
alert('An error occurs!');
}
});
</script>
so it should alert "Thank you fo your feedback." after click on the send button.
I am trying to implement a modal AJAX form. But when I press "Submit" I only receive empty body emails. I guess I have bugs in PHP code.
HTML:
<form class="form" method="POST">
<input type="text" name="name" placeholder="Name">
<input type="text" name="phone" placeholder="Phone">
<input type="submit" value="Submit" >
</form>
Jquery:
$(".form").submit(function() {
var this1= $(this);
var form_data = $(this).serialize();
if (is_empty(this1)){
$.ajax({
type: "POST",
url: "feedback.php",
data: form_data,
success: function (res) {
swal("Thank you", "very much", "success");
$('.black_layout').fadeOut(200);
$('.main_form_wrapper').fadeOut(200);
this1.trigger('reset');
}
});
}
return false;
});
PHP in feedback.php file:
parse_str($_POST['form_data'], $formdata);
$name = $formdata['name'];
$phone=$formdata['phone'];
$formcontent="From: $name \n Phone: $phone";
$recipient = "email#gmail.com";
$subject = "MAIL HEADER";
mail($recipient, $subject, $formcontent) or die("Error");
EDIT:I am also not getting a "Thank you" message for some reason.
You have an error during sending form data with ajax request. here is your code which is working fine :
JQuery :
$(".form").submit(function() {
var this1= $(this);
var form_data = $(this).serialize();
alert(form_data);
//if (is_empty(this1)){
$.ajax({
type: "POST",
url: "feedback.php",
data: {'form_data' : form_data },
success: function (res) { alert(res);
//swal("Thank you", "very much", "success");
$('.black_layout').fadeOut(200);
$('.main_form_wrapper').fadeOut(200);
this1.trigger('reset');
}
});
//}
return false;
});
I've created a simple AJAX, Jquery, PHP contact form on my website with inputs: Name, Email and Message. The problem is that when you write an actual email into the email field the message never comes to my inbox. It works only when the Email input field contains 1 word with no # sign.
My HTML:
<p class="form">Name</p>
<input type="text" name="userName" id="userName">
<p class="form">Email</p>
<input id="userEmail" type="email" name="userEmail">
<p class="form">Message</p>
<textarea id="msg" name="msg"></textarea><button onClick="sendContact();"></button>
My JavaScript:
function sendContact() {
jQuery.ajax({
url: "contact_me.php",
data:'userName='+$("#userName").val()+'&userEmail='+
$("#userEmail").val()+'&msg='+
$("#msg").val(),
type: "POST",
success:function(){
sendSuccess();
},
error:function (){}
});
};
My PHP:
<?php
$to = "dusset#gmail.com";
$from = $_POST['userEmail'];
$name = $_POST['userName'];
$subject = $name . "has sent you a message from .design";
$message = $name . " wrote the following:" . "\n\n" . $_POST['msg'];
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);?>
Any idea what could be the problem, please?
Try changing how you pass the data to Ajax. An example:
function sendContact() {
jQuery.ajax({
url: "contact_me.php",
data: { userName: $("#userName").val(), userEmail: $("#userEmail").val(), msg: $("#msg").val()},
type: "POST",
success:function(){
sendSuccess();
},
error:function (){}
});
};
I have a simple html form where I will send a mail and there is another file named as ajax-form-submit.php where the file process will do. Now I want to show the success or failure message in the html file through ajax.
So my html form with jQuery goes like this
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
First Name: <input type="text" name="fname" value ="Ravi"/> <br/>
Last Name: <input type="text" name="lname" value ="Shanker" /> <br/>
Email : <input type="text" name="email" value="xx#xxx.com"/> <br/>
<input type="button" id="simple-post" value="Run Code" name="submit"/>
</form>
<div id="simple-msg"></div>
<script>
jQuery(document).ready(function() {
jQuery("#simple-post").click(function() {
jQuery("#ajaxform").submit(function(e) {
jQuery("#simple-msg").html("<img src='loading.gif'/>");
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax( {
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR) {
jQuery("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
},
error: function(jqXHR, textStatus, errorThrown)
{
$("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
}
});
e.preventDefault(); //STOP default action
});
$("#ajaxform").submit(); //SUBMIT FORM
});
});
</script>
Now the php file where the mail will go will be like this
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$ToEmail = 'test#demo.com';
$MESSAGE_BODY = "Name: ".$_POST["name"]."<br>";
$MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>";
$mail = mail($ToEmail, $MESSAGE_BODY);
if($mail) {
echo "Mail sent successfully";
}
else {
echo "oops there is some error";
}
}
?>
I want the success message or the error message should be shown in html page.
Its showing only any message is written outside the if (isset($_POST['submit'])) { function but by doing this I can't show the success message or error message. So can someone kindly tell me how to do this? Any help will be really appreciable. Thanks.
HTML
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
First Name: <input type="text" name="fname" id="fname" value ="Ravi"/> <br/>
Last Name: <input type="text" name="lname" id="lname" value ="Shanker" /> <br/>
Email : <input type="text" name="email" id="email" value="xx#xxx.com"/> <br/>
<input type="button" id="simple-post" value="Run Code" name="submit"/>
</form>
<div id="simple-msg"></div>
<script type="text/javascript">
jQuery("#simple-post").click(function() {
jQuery("#simple-msg").html("<img src='loading.gif'/>");
var formURL = $(this).attr("action");
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
$.ajax({
url : formURL,
type: "POST",
data : {
aFname: fname,
aLname: lname,
aEmail: email,
aSubmit:"submit"
},
success:function(data, textStatus, jqXHR) {
jQuery("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
},
error: function(jqXHR, textStatus, errorThrown){
$("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
}
});
});
</script>
PHP
if (isset($_POST['aSubmit'])) {
$name = $_POST['aFname'];
$lname = $_POST['aLname'];
$email = $_POST['aEmail'];
$ToEmail = 'test#demo.com';
$MESSAGE_BODY = "Name: ".$_POST["aFname"].' '.$_POST["aLname"]."<br/>";
$MESSAGE_BODY .= "Email: ".$_POST["aEmail"]."<br/>";
$mail = mail($ToEmail, $MESSAGE_BODY);
if($mail) {
echo "Mail sent successfully";
}
else{
echo "oops there is some error";
}
}
Note:_I would like to mention here that i have not shown any efforts to prevent SQL injection or any other kind of vulnerability-prevention here just because that can increase the complexity for you. But, make sure that before posting such code to live sites, you incorporate all efforts to prevent your site._
I would suggest to send the status (success or error) back to the client using JSON (using PHP json_encode()). For that, you will also need to add a JSON listener in your page using JQuery script.