Mark Mark - 2 months ago 6
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>

<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>

<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>
</form>


Then my JS:


// JavaScript Document

var g = jQuery.noConflict();

g(document).ready( function() {

g("#submit").click(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');
g.post("/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
},
function(data){
// no errors? great now do what you want to show the user his message is sent
alert('sent');
}
);
}

return false;
});

});


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

<?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 = "email@address.com";
$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?

Answer

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

    g("#sendEmail").submit(function(){

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