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!
精彩评论