Been searching high and low for answers on this forum and elsewhere. No dice. I'm using Bootstrap, jQuery Validator with the submitHandler function for the AJAX, and a fairly straightforward PHP script to send HTML email (for now, only to myself for testing purposes). The form validates fine, the functions all seem to be hitting, when I click on submit the form clears...but no email comes through and it's not even hitting the "success" function.
I have tried a stupid simple PHP script that just sends plain text email with no content or form variables, but no cigar.
The HTML form:
<form id="cns-contact" class="well form-horizontal" method="post" action="">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Full Name</label>
<div class="controls">
<input id="name" name="name" class="" type="text" placeholder="Full Name" required autocomplete="off">
<!--<div class="err-span">Please enter your first and last name</div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" name="email" class="" type="email" placeholder="Email Address" required autocomplete="off">
<!--<div class="err-span">Please enter a valid email address</div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="company">Company</label>
<div class="controls">
<input id="company" name="company" class="" type="text" name="company" placeholder="Company Name" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="address">Address</label>
<div class="controls">
<input id="address" name="address" class="" type="text" name="address" placeholder="Street Address, Suite/Apt" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="city">City</label>
<div class="controls">
<input id="city" name="city" class="" type="text" placeholder="City" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="state">State</label>
<div class="controls">
<input id="state" name="state" class="" type="text" pattern="[A-Za-z]{2}" placeholder="State" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="zip">Zip</label>
<div class="controls">
<input id="zip" name="zip" class="" type="text" pattern="\d{5}" placeholder="Zip" required autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="phone">Phone</label>
<div class="controls">
<input id="phone" name="phone" class="" type="text" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="123-456-7890" autocomplete="off">
<!--<div class="err-span"></div> -->
</div>
</div>
</fieldset>
<fieldset>
<div class="control-group">
<label class="control-label" for="subject">Service Request</label>
<div class="controls">
<select id="subject" name="subject" class="">
<option value="">I am inquiring about:</option>
<option value="Customer Service">General Customer Service</option>
<option value="Building Automation">Building Automation</option>
<option value="HVAC Services">HVAC Services</option>
<option value="HVAC Construction">HVAC Construction</option>
<option value="Facilities Management">Facilities Management</option>
<option value="Consulting">Consulting</option>
<option value="NFPA Damper Inspection">NFPA Damper Inspection</option>
<option value="Energy Efficiency">Energy Efficiency</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" class="input-xlarge span12" rows="10"></textarea>
</div>
</div>
<p>The information you provide will enable C&S to serve your needs more adequately. C&S respects your privacy and will not disclose this data to any third parties.</p>
<button id="submit" type="submit" name="submit" value="submit" class="btn btn-primary btn-success">Submit</button><button id="reset" type="reset" name="reset" value="reset" class="btn btn-primary btn-danger">Reset</button>
</fieldset>
</div>
</form>
The jQuery Validation script (some lines have been commented out as they seemed to interfere with the highlight, success and error functions):
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cns-contact').validate({
//establish rules for validation
rules: {
name: { required:true, minlength:2 },
email: { required:true, email:true },
company: { required:true, minlength:2 },
address: { required:true, minlength:2 },
city: { required:true, minlength:2 },
state: { required:true, minlength:2, maxlength:2 },
zip: { required:true, minlength:5, maxlength:5 },
phone: { required:true },
subject: { required:true, valueNotEquals:"-1" },
message: { required:false }
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
company: "Please provide your company name",
address: "Please provide your street address",
city: "Please provide a valid city name",
state: "Please enter your state abbreviation",
zip: "Please enter your 5-digit zip code",
phone: "Please provide your 10-digit phone number",
subject: "Please select the type of service request",
message: ""
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(label) {
label.text('').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
//onkeyup:false,
submitHandler: function(form) {
$.ajax ({
data: $('#cns-contact').serialize(),
type: 'POST',
url: 'scripts/bs.php',
success: function() {
$('#results').html("<div class='alert alert-success'>");
$('#results > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#results > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#results > .alert-success')
.append('</div>');
}
//focusInvalid: false
});
return false;
}
});
});
</script>
And finally, the PHP script (which I stumbled upon, I am not versed in PHP whatsoever):
<?php
$to = 'me@dev-test.com' ;
$from = $_POST['email'] ;
$name = $_POST['name'] ;
$headers = "From: " . $email . "
";
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1
";
$subject = $_POST['subject'] ;
$message = '<html><body>';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>";
$message .= "<tr><td><strong>Company:</strong> </td><td>" . strip_tags($_POST['company']) . "</td></tr>";
$message .= "<tr><td><strong>Address:</strong> </td><td>" . strip_tags($_POST['address']) . "</td></tr>";
$message .= "<tr><td><strong>City:</strong> </td><td>" . strip_tags($_POST['city']) . "</td></tr>";
$message .= "<tr><td><strong>State:</strong> </td><td>" . strip_tags($_POST['state']) . "</td></tr>";
$message .= "<tr><td><strong>Zip:</strong> </td><td>" . strip_tags($_POST['zip']) . "</td></tr>";
$message .= "<tr><td><strong>Phone:</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>";
$message .= "<tr><td><strong>Subject:</strong> </td><td>" . strip_tags($_POST['subject']) . "</td></tr>";
$message .= "<tr><td><strong>Message:</strong> </td><td>" . strip_tags($_POST['message']) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
$headers2 = "From: $to";
$subject2 = "Thank you for contacting us";
$autoreply = "Thank you for contacting us. Somebody will get back to you as soon as possible, usually within 48 hours. If you have any more questions, please consult our website at www.oursite.com";
$send = mail($to, $subject, $message, $headers);
$send2 = mail($from, $subject2, $autoreply, $headers2);
?>
Any advice (or just a fresh pair of eyes that have seen some daylight recently) would be a godsend. I don't know where else to turn.
UPDATE: Bye bye AJAX, have resorted to what should have been a straightforward implementation of form input --> validation --> form data submission --> php processing --> redirect to confirmation page or error page. This is the jQuery:
$(document).ready(function() {
//var validator = $('#cns-contact').validate({
$('#cns-contact').validate({
//establish rules for validation
rules: {
name: { required:true, minlength:2 },
email: { required:true, email:true },
company: { required:true, minlength:2 },
address: { required:true, minlength:2 },
city: { required:true, minlength:2 },
state: { required:true, minlength:2, maxlength:2 },
zip: { required:true, minlength:5, maxlength:5 },
phone: { required:true },
subject: { required:true, valueNotEquals:"-1" }
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
company: "Please provide your company name",
address: "Please provide your street address",
city: "Please provide a valid city name",
state: "Please enter your state abbreviation",
zip: "Please enter your 5-digit zip code",
phone: "Please provide your 10-digit phone number",
subject: "Please select the type of service request"
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
onclick: function(element, event) {
$(element).change(function(){
var $this = $('#subject');
var selectDD = $this.val();
if (selectDD != 0) {
$this.parent().parent().addClass('valid').removeClass('error').addClass('success');
$this.addClass('success');
} else if (selectDD == 0) {
$this.parent().parent().removeClass('valid').addClass('error').removeClass('success');
$this.removeClass('success');
}
})
},
success: function(label) {
label.text('OK').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
onkeyup:false,
submitHandler: function(form) {
form.submit();
//focusInvalid: false
}
});
});
Not much changed in the markup, except for having to add the URL to the PHP in the form action. Got rid of the reset button, that was too hairy as well. So it's working as it stands, except for the error and valid/success CSS styling on the select dropdown. Sometimes it works, sometimes it doesn't, mostly it's a mess.
Now, what's happening is I'm getting emails that were processed by the PHP 5-10 minutes prior. I think this is a server latency or something, but hoping I don't have a nasty recursion or worse in my code.
