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(开发者_Go百科'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?
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.
On a side note, you can reduce the amount of code that you write by serializing your form data with $(FORM ID or CLASS).serialize()
Cheers!
your js code is not called because you added submit button, when hit on that it will submit the form without waiting for a click event to be fired so either you change the button to click and then submit the form from click event or you can use submit an event
Cheers!
加载中,请稍侯......
精彩评论