jQuery submit form

JavaScript
1

Trying to do a form then when the users clicks submit that it will send an email. Everything works except it never sends the email. I tried to alert the dataString variable and it is set properly.

HTML


<div id="contactForm">
 <form action="" method="post" name="emailForm">
 <table>
 <tr>
 <td>Name: </td>
 <td><input id="username" type="text" /></td>
 </tr>
 <tr>
 <td>Your Email: </td>
 <td><input id="emailaddress" type="text" /></td>
 </tr>
 <td>How can we help?: </td>
 <td><textarea rows="4" cols="20" id="message"></textarea></td>
 </tr>
 <td><input type="button" value="Submit" id="submit" /></td>
 <td><input type="button" value="Cancel" id="cancel" /></td>
 </tr>
 </table>
 </form>
 </div>

jQuery


$(document).ready(function() {
 $("#contactForm").hide();

 $("pre").click(function() {
 $('body').css('overflow-y', 'hidden');

 $('<div id="overlay"></div>')
 .css('top', $(document).scrollTop())
 .css('opacity', '0')
 .animate({'opacity': '0.5'}, 'slow')
 .appendTo('body');
 
 $("#contactForm").show().appendTo('overlay');
 
 positionBox();

 $("#username").focus();
 
 var emailAddress = $(this).attr("title");
 
 $("#submit").click(function() {
 var name = $("#username").val();
 var usersEmail = $("#emailaddress").val();
 var message = $("#message").val();
 var messageSubject = "Email from GVHS Site";
 
 if(name == '') {
 $("#username").after('<span id="usererror" style="color:#ff0000;">Must enter your name</span>');
 $("#username").click(function() {
 $("#usererror").hide();
 });
 }
 
 if(usersEmail == '') {
 $("#emailaddress").after('<span id="emailerror" style="color:#ff0000;">Must enter an email address</span>');
 $("#emailaddress").click(function() {
 $("#emailerror").hide();
 });
 }
 
 if(message == '') {
 $("#message").after('<span id="messageerror" style="color:#ff0000;">Must enter a message</span>');
 $("#message").click(function() {
 $("#messageerror").hide();
 });
 }
 
 if(name != '' || usersEmail != '' || message != '') {
 var dataString = 'name=' + name + '&emailTo' + emailAddress + "&emailFrom=" + usersEmail + "&subject=" + messageSubject + "&message=" + message;

 $.ajax({ 
 type: "POST",
 url: "includes/sendemail.php",
 data: dataString,
 success: function() {}
 });

 setTimeout(function() {
 removeBox();
 },800);
 }
 });
 });

 $("#cancel").click(function() {
 removeBox();
 });
});

function positionBox() {
  var top = ($(window).height() - $('#contactForm').height()) / 2;
  var left = ($(window).width() - $('#contactForm').width()) / 2;
  $('#contactForm')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
}

function removeBox() {
  $('#overlay, #contactForm')
    .fadeOut('slow', function() {
      $(this).remove();
      $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}

PHP


<?php
    $name = $_POST['name'];
    $mailTo = $_POST['emailTo'];
    $mailFrom = $_POST['emailFrom'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];

    $header = "From: GVHS<no-reply@jcwebconcepts.net>\\r\
";

    mail($mailTo, $subject, $message, $header);
?>
2

Ok I figured out the code. There was 2 things wrong in the jQuery.

var dataString = ‘name=’ + name + ‘&emailTo’ + emailAddress + “&emailFrom=” + usersEmail + “&subject=” + messageSubject + “&message=” + message;

Should be

var dataString = ‘name=’ + name + ‘&emailTo=’ + emailAddress + “&emailFrom=” + usersEmail + “&subject=” + messageSubject + “&message=” + message

Also I was pointing to includes/sendemail.php when it should have been includes/sendmail.php