Form validated but no email send

Question

have some problems with my form which is being validated correctly, but when clicking submit button no email is going out. Mail fucntion is enabled on server as i checked raw mail sending. What can be wrong here? See my code below

HTML and JS:

....

  <!-- Bootstrap Css -->
    <link href="bootstrap-assets/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="js/validator.min.js"></script>

    <!-- Style -->
    <link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet">
    <link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
    <link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
    <link href="plugins/Icons/et-line-font/style.css" rel="stylesheet">
    <link href="plugins/animate.css/animate.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <!-- Icons Font -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">



<script>

$(document).ready(function () {
$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
            console.log("rrrr");
    } else {
        console.log("fff");
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});
});

$(document).ready(function submitForm() {
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){

            if (text == "success"){
                formSuccess();
            }
        }
    });
});

$(document).ready(function formSuccess() {
    $("#msgSubmit" ).removeClass( "hidden" );
});


</script>

contact form:

<form role="form" id="contactForm">
     <div class="row">
            <div class="form-group">
                 <input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
            </div>

        <div class="form-group">
            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
     </div>
    </form>

procrss.php:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "george@hgtg.com";
$Subject = "New Message Received";

// send email
$success = mail($EmailTo, $Subject, $message, $email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}
?>

Answer 1

Several of your javascript functions are being called at page load time, which is not what you are intending.

Only put functions in a $(document).ready() statement when you want those functions to run at page load time.

Here's a working version of your javascript, and a jsfiddle that replaces the $.ajax function with a test function called testAjax. All testAjax does is call your success function. (replace ajaxTest with $.ajax in production). You'll see that the jsfiddle behaves as you want.

function formSuccess() {
    $("#msgSubmit" ).removeClass( "hidden" );
    document.getElementById('msgSubmit').innerHTML = 'Message submitted!';
    setTimeout( function () {
        $("#msgSubmit" ).addClass( "hidden" );
        }, 5000
    );
}

// test version of ajax, replace with real "$.ajax()" in production
function ajaxTest( ajaxData ) {
    // just a test, so call the success callback
    ajaxData.success( 'success' );
}

function submitForm() {
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    // replace 'ajaxText' with '$.ajax' in production
    ajaxTest({
        type: "POST",
        url: "process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });
}

$(document).ready(function () {
    $("#contactForm").on("submit", function (event) {
            // prevent default form submit
            event.preventDefault();
            // call our own submit
            submitForm();
        }
    );
});

Answer 2

Hiding your "Message submitted" message and clearing the inputs after a specified time is straightforward.

You would do this with a call to setTimeout(). Something like this:

setTimeout( function() { myCleanupFunction(); }, 5000 );

That will call myCleanupFunction() after a 5 second wait.

Documentation on how to use setTimeout().

or what it looks like in the original code:

formSuccess() {
    $("#msgSubmit" ).removeClass( "hidden" );
    setTimeout( function() { myCleanupFunction(); }, 5000 );
}

Answer 3

The second function isn't what you seem to think it is, it's just DOM ready handler that you have given a name to, and you should see an error in the console telling you that submitForm() is not defined.

Change it to just

function submitForm() {
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    ... etc
}

instead of

$(document).ready(function submitForm() {
    // Initiate Variables With Form Content
    var name = $("#name").val();
   ....

---

EDIT: open the console (F12), and add some logs to see what's happening

$(document).ready(function() {
    $("#contactForm").validator().on("submit", function(event) {
        if (event.isDefaultPrevented()) {
            console.log("rrrr");
        } else {
            event.preventDefault();
            submitForm();
        }
    });

    $("#msgSubmit").removeClass("hidden");
});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "process.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            console.log(text); // should be "invalid" or "success"
        },
        error : function() {
            console.log('epic fail');
        }
    });
}

Answer 4

The fourth argument of mail should be additional headers, not just the sender's email address. So you've to rewrite your function:

$headers = 'From: ' . $email . "\r\n";
$success = mail($EmailTo, $Subject, $message, $headers);

But I'd suggest you add the sender's email to the message body. Since the suggested solution is vulnerable due to missing checks on the sender's email address.

$message .= "\n\n" . 'From: '. $email;
$success = mail($EmailTo, $Subject, $message);