send email with Js validation, php and ajax

Question

I have a simple "contact me" form. Is made in html (of course), validate in Javascript than I use Ajax request and send all of it to a php file, where the form should be validated again and than send it. (i know just a bit of php so i hope is like that!)

The "success" or "not submit" message are in the html and displayed by ajax/js. So my question is easy: How can i send the body to my personal email including the php validation? I show you my code:

Js/ajax:

myForm.submitForm = function(){
var formData = {
    name: myForm.name.val(),
    email: myForm.email.val(),
    text: myForm.text.val(),
};

$.ajax({
    url: 'contact.php',
    method: 'post',
    //dataType: 'json';
    success: myForm.submitSuccess,
    error: myForm.submitError
})
};

myForm.submitSuccess = function(data, textStatus, jqXHR){
console.log(data, textStatus, jqXHR);
myForm.succMess.html(data.message);
myForm.succMess.show();
};

myForm.errorSuccess = function(jqXHR, textStatus, errorThrown){
console.log(jqXHR, textStatus, errorThrown);
myForm.errorMess.html(textStatus);
myForm.errorMess.show();
};

Php:

<?php
   $nome = $_POST['name'];
   $email = $_POST['email'];
   $text = nl2br($_POST['text']);

    //mail() I guess i should use this one but how?!    

    //check if inputs are empty
if(!empty($nome) and !empty($email) and !empty($text)){
    $mail_to = "[email protected]";
    $mail_from = $email;
    $mail_subject = "Email sent by $nome";
    $mail_body = "$nome: $email. $text";

?>

Any help is really appreciated :)

You will find most or all of your answers on the PHP.net Website php.net/manual/en/function.mail.php on the mail() function. If you want to send the $mail_body, just use mail($mail_to, $mail_subject, $mail_body, $headers); — Funk Forty Niner
– Funk Forty Niner, Commented Sep 16, 2013 at 18:29
Plus your mail(); would go under $mail_body = "$nome: $email. $text"; and not under $text = nl2br($_POST['text']); — Funk Forty Niner
– Funk Forty Niner, Commented Sep 16, 2013 at 18:35
thanks for answering. Yes i already had a look to the official doc but i didn't understand. So you mean that I just need to write mail($mail_to, $mail_subject, $mail_body, $headers); after $mail_body and that's all? — Giorgia Sambrotta
– Giorgia Sambrotta, Commented Sep 16, 2013 at 20:23
You're welcome. Yes something to that affect. However I suggest you use && instead of and — Funk Forty Niner
– Funk Forty Niner, Commented Sep 16, 2013 at 20:25
Plus I did try your code and there's something in there that wasn't sending mail. Where did you get it from? I use my own version of Ajax handler with mail which works beautifully. — Funk Forty Niner
– Funk Forty Niner, Commented Sep 16, 2013 at 20:28

Funk Forty Niner · Accepted Answer · 2013-09-16 20:51:37Z

1

Here is what I use to send mail via Ajax and jQuery.

HTML form

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('#submit').click(function(){
        $('#success').hide(1);
        $.post("email_ajax.php", $("#contact").serialize(),  function(response) {
            $('#success').html(response);
            $('#success').show(1000);
        });
        return false;
    });
});
</script>

<style>

html {
/*    height: 100%; */

height:auto;
}
body {
    background:#000;
/*  background: url(bg.png);
    background-repeat:repeat;*/
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #fff;
    font-family: Proxima, sans-serif;;
}

#empty {
    display:block;
    clear:both;
    height:150px;
    width:auto;
    background:none;
    border:none;
}

#contact ul{
    margin-left:10px;
    list-style:none;
}

#contact ul li{
    margin-left:0px;
    list-style:none;
}
</style>
</head>

<body>
<form id="contact" action="" method="post">
<ul>
    <li>
        <label for="name">Name:</label><br>
        <input id="name" type="text" name="name"  width="250" size="35" required/>
    </li>
    <li>
        <label for="email">Email:</label><br>
        <input id="email" type="text" name="email" width="250" size="35" required/>
    </li>
<br><br>
    <li>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="6" cols="40" required></textarea>
    </li>
    <li><input type="button" value=" SEND " id="submit" /><input type="reset" value="Reset" name="reset">
<div id="success" style="color: yellow;"></div></li>
</ul>
</form>
</body>
</html>

email_ajax.php

Note: Change $to = '[email protected]'; to your Email address.

<?php
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("<b>ERROR!</b> All fields must be filled.");
}

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$name = strtolower($name);
$name = ucwords($name);

$to = '[email protected]';
$subject = 'Website message from: '.$name;
$message = 'FROM: '.$name." \nEmail: ".$email."\nMessage: \n".$message;
$headers = 'From: [email protected]' . "\r\n";

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { 
mail($to, $subject, $message, $headers); 
echo "Thank you! Your email was sent $name.";
echo "<br>";
echo "This is the email you entered: <b>$email</b>";
}else{
// echo var_dump($_POST);
echo "<b>ERROR!</b> Invalid E-mail. Please provide a valid email address. Example: [email protected]";
echo "<br>";
echo "The email <b>$email</b> you entered, is not valid.";
}

?>

answered Sep 16, 2013 at 20:51

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Giorgia Sambrotta Over a year ago

Yey! Thank you, now i play a bit around and i will tell you the outcome :)

Funk Forty Niner Over a year ago

@GiorgiaSambrotta You're welcome. I guess you will accept it if and when it does work for you? It works for me, I shouldn't see why it would not for you. :)

Giorgia Sambrotta Over a year ago

Sorry for get back so late. I thought i already answered. Anyway thank man for you code, works good :) I just have some problem with $headers that in some how broke everything, but without it (that i don't need anyway) works great.

Funk Forty Niner Over a year ago

@GiorgiaSambrotta You're welcome. Please consider accepting my answer in order to close the question, cheers

Collectives™ on Stack Overflow

send email with Js validation, php and ajax

1 Answer 1

HTML form

email_ajax.php

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML form

email_ajax.php

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related