Mark Mark - 5 months ago 13
jQuery Question

Form submitting with jQuery and sending with PHP.. Can't work out why its not sending

Console is not showing any errors, neither is Firebug so I'm at a loss as to why this isn't working.

My form:

<form action="" method="post" id="sendEmail">
<div class="alignleft">
<p><label for="order_ref">Photo ID:</label><input type="text" name="order_ref" id="order_ref" class="text smallinput" disabled="disabled" value="<? echo $ref; ?>"/></p>
<p><label for="order_name">Full Name:</label><input type="text" name="order_name" id="order_name" class="text" tabindex="10" /></p>
<p><label for="order_telephone">Contact Number:</label><input type="text" name="order_telephone" id="order_telephone" class="text" tabindex="20" /></p>
<p><label for="order_email">Email Address:</label><input type="text" name="order_email" id="order_email" class="text" tabindex="30" /></p>

<div class="alignright">
<p class="higher"><label for="order_message">Message</label><textarea name="order_message" id="order_message" class="uniform" tabindex="40"></textarea></p>

<div class="rounded color_grey"><p>Clicking confirm will mail your order to us. We'll be in touch shortly. <input type="submit" id="submit" name="submit" value="" class="alignright" /></p></div>

Then my JS:

// JavaScript Document

var g = jQuery.noConflict();

g(document).ready( function() {


// set initial error value to false
var hasError = false;

// set var for each form field
var order_ref = g("#order_ref").val();
var order_name = g("#order_name").val();
var order_telephone = g("#order_telephone").val();
var order_email = g("#order_email").val();
var order_message = g("#order_message").val();

// validate each of them
if(order_ref == '') { g("#order_ref").addClass('haserror'); hasError = true; }
if(order_name == '') { g("#order_name").addClass('haserror'); hasError = true; }
if(order_telephone == '') { g("#order_telephone").addClass('haserror'); hasError = true; }
if(order_email == '') { g("#order_email").val().addClass('haserror'); hasError = true; }
if(order_message == '') { g("#order_message").val().addClass('haserror'); hasError = true; }

// if there's no errors, proceed
if(hasError == false) {
//alert('no errors');"/photo/theme/foodphoto/includes/mail_send.php",
// pass each of the form values to the PHP file for processing
order_ref: order_ref,
order_name: order_name,
order_telephone: order_telephone,
order_email: order_email,
order_message: order_message
// no errors? great now do what you want to show the user his message is sent

return false;


And the PHP that should send it (mail_send.php)


// receive & save each of the vars from the AJAX request
$order_ref = $_POST['order_ref'];
$order_name = $_POST['order_name'];
$order_telephone = $_POST['order_telephone'];
$order_email = $_POST['order_email'];
$order_message = $_POST['order_message'];

// setup the email requirements
$to = "";
$subject = "Order Has Been Placed";

// what must be in the mail message
$message = "The following order has been placed on your website:";

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: '.$order_name.' <'.$order_email.'>';

mail($to, $subject, $message, $headers);


Console reports no PHP issues and Firebug (I am new at using this, so I might have skipped something?) reports no issues...?

What am I doing wrong?


Don't use the .click handler when using an input type of submit. Switch it to


Then see if when you click submit you invoke the JS as expected.