UPDATE - one last issue**
there were some syntax errors in my javascript that cause it to have the original problem. Now that those are fixed i just have one more thing to fix before it’s done. Thanks a lot for the feedback 
When the form is submitted, <div id=“response”></div> is populated with either a “success” message or a “failed” message. I would like to add focus to the response div to be sure the user will always see that message. Where should I add this?
Here are the two files with the logic:
.js
$(document).ready(function() {
$('#agents input:submit').click(function() {
$('#agents form').attr('action', 'http://' + document.domain + '/php/feedback.php');
$('#agents form').submit();
});
$('form #response').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var nameResponse = '';
var addressResponse = '';
var cityResponse = '';
var stateResponse = '';
var zipResponse = '';
var phoneResponse = '';
var yearResponse = '';
var makeResponse = '';
var modelResponse = '';
var bodyStyleResponse = '';
var vinResponse = '';
var damagedGlassResponse = '';
var insCompanyResponse = '';
var agencyResponse = '';
var policyResponse = '';
var sentByResponse = '';
var compCoverageResponse = '';
var deductibleResponse = '';
var dateOfLossResponse = '';
var causeOfLossResponse = '';
var replyEmailResponse = '';
var specialInstructionsResponse = '';
var required = ' is required.';
//Custom Information
var name = $('form #cusName').val();
var address = $('form #cusAddress').val();
var city = $('form #city').val();
var state = $('form #state').val();
var zip = $('form #zip').val();
var homePhone = $('form #homePhone').val();
var workPhone = $('form #workPhone').val();
var cellPhone = $('form #cellPhone').val();
//Vehicle Information
var year = $('form #year').val();
var make = $('form #make').val();
var model = $('form #model').val();
var bodyStyle = $('form #bodyStyle').val();
var vin = $('form #vin').val();
var damageGlass = $('form #damagedGlass').val();
//Insurance Information
var insCompany = $('form #insCompany').val();
var agency = $('form #agency').val();
var policy = $('form #policy');
var sentBy = $('form #sentBy');
var compCoverage = $('form #compCoverage').val();
var deductible = $('form #deductible').val();
var dateOfLoss = $('form #dateOfLoss').val();
var causeOfLoss = $('form #causeOfLoss').val();
var replyEmail = $('form #replyEmail').val();
var specialInstructions = $('form #specialInstructions').val();
//Spam Info
var honeypot = $('form #honeypot').val();
var humanCheck = $('form #humanCheck').val();
// perform error checking
//Customer
if (name = '' || name.length <= 2) {
nameResponse += '<p>Customer name' + required +'</p>';
}
if (address = '' || address.length <= 5) {
addressResponse += '<p>Customer address' + required + '</p>';
}
if (city = '' || city.length <=2) {
cityResponse += '<p>Customer city' + required + '</p>';
}
if (state = '' || state.length < 2) {
stateResponse += '<p>Customer state' + required + '</p>';
}
if (zip = '' || zip.length <= 4) {
zipResponse += '<p>Customer zip code' + required + '</p>';
}
if (homePhone = '' || homePhone.length < 7) {
phoneResponse += '<p>Customer home phone' + required + '</p>';
}
//Vehicle
if (year = '' || year.length < 4) {
yearResponse += '<p>Vehicle year (ex: 2011)' + required + '</p>';
}
if (make = '' || make.length <=2) {
makeResponse += '<p>Vehicle make' + required + '</p>';
}
if (model = '' || model.length < 2) {
modelResponse += '<p>Vehicle model' + required + '</p>';
}
if (bodyStyle = '') {
bodyStyleReponse += '<p>Please select a body style</p>';
}
if (vin = '' || vin.length <= 16) {
vinResponse += '<p>Vin number' + required + '</p>';
}
if (damagedGlass = '' || damagedGlass <= 3) {
damagedGlassResponse += '<p>Damaged Glass' + required + '</p>';
}
//Insurance
if (insCompany = '' || insCompany.length <=2) {
insCompanyResponse += '<p>Insurance company' + required + '</p>';
}
if (agency = '' || agency.length <=3) {
agencyResponse += '<p>Agency' + required + '</p>';
}
if (policy = '' || policy.length <=5) {
policyResponse += '<p>Policy number' + required + '</p>';
}
if (sentBy = '' || sentBy.length <= 6) {
sentByResponse += '<p>Please include your name in the ' + '"Sent By"' + 'field</p>';
}
if (compCoverage = '') {
compCoverage += '<p>Comp Coverage' + required + '</p>';
}
if (deductible = '') {
deductibleResponse += '<p>Deductible' + required + '</p>';
}
if (dateOfLoss = '' || dateOfLoss.length <= 3) {
dateOfLoss += '<p>Date of loss' + required + '</p>';
}
if (causeOfLoss = '' || causeOfLoss.length <= 3) {
causeOfLoss += '<p>Cause of loss' + required + '</p>';
}
if (!replyEmail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\\.[a-z]{2,4}$)/i)) {
replyEmailResponse += '<p>Your reply email' + required +'</p>';
}
if (specialInstructions = '' || specialInstructions.length <= 5) {
specialInstructionsResponse += '<p>A message' + required + '</p>';
}
if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
}
if (humanCheck != '') {
valid += '<p>A human user' + required + '</p>';
}
// let the user know if there are erros with the form
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
'<strong>Please correct the errors below.</strong>' + '</div>'
).fadeIn('fast').focus();
if (nameResponse != '') {
$('form #nameResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
nameResponse + '</div>'
).fadeIn('fast');
}
if (addressResponse != '') {
$('form #addressResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
addressResponse + '</div>'
).fadeIn('fast');
}
if (cityResponse != '') {
$('form #cityResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
cityResponse + '</div>'
).fadeIn('fast');
}
if (stateResponse != '') {
$('form #stateResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
stateResponse + '</div>'
).fadeIn('fast');
}
if (zipResponse != '') {
$('form #zipResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
zipResponse + '</div>'
).fadeIn('fast');
}
if (phoneResponse != '') {
$('form #phoneResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
phoneResponse + '</div>'
).fadeIn('fast');
}
if (yearResponse != '') {
$('form #yearResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
yearResponse + '</div>'
).fadeIn('fast');
}
if (makeResponse != '') {
$('form #makeResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
makeResponse + '</div>'
).fadeIn('fast');
}
if (modelResponse != '') {
$('form #modelResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
modelResponse + '</div>'
).fadeIn('fast');
}
if (bodyStyleResponse != '') {
$('form #addressResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
bodyStyleResponse + '</div>'
).fadeIn('fast');
}
if (vinResponse != '') {
$('form #vinResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
vinResponse + '</div>'
).fadeIn('fast');
}
if (damagedGlassResponse != '') {
$('form #damagedGlassResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
damagedGlassResponse + '</div>'
).fadeIn('fast');
}
if (insCompanyResponse != '') {
$('form #insCompanyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
insCompanyResponse + '</div>'
).fadeIn('fast');
}
if (agencyResponse != '') {
$('form #agencyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
agencyResponse + '</div>'
).fadeIn('fast');
}
if (policyResponse != '') {
$('form #policyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
policyResponse + '</div>'
).fadeIn('fast');
}
if (sentByResponse != '') {
$('form #sentByResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
sentByResponse + '</div>'
).fadeIn('fast');
}
if (compCoverageResponse != '') {
$('form #compCoverageResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
compCoverageResponse + '</div>'
).fadeIn('fast');
}
if (deductibleResponse != '') {
$('form #deductibleResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
deductibleResponse + '</div>'
).fadeIn('fast');
}
if (dateOfResponse != '') {
$('form #dateOfResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
dateOfResponse + '</div>'
).fadeIn('fast');
}
if (causeOfResponse != '') {
$('form #causeOfResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
causeOfResponse + '</div>'
).fadeIn('fast');
}
if (replyEmailResponse != '') {
$('form #replyEmailResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
replyEmailResponse + '</div>'
).fadeIn('fast');
}
if (specialInstructionsResponse != '') {
$('form #specialInstructionsResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
specialInstructionsResponse + '</div>'
).fadeIn('fast');
}
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'php/feedback.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success:
function(data) {
//we are getting data.error (from ajax, which is formData) and data.msg from our feedback.php
$('form #response').removeClass().addClass((data.error === true) ? 'error':'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout ("$('form #response').fadeOut('fast')",5000);
}
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">' +
'<p>There was an <strong>' + errorThrown +
'</strong> error due to a <strong>' + textStatus +
'</strong> condition.</p>' +
'</div>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form') [0].reset();
}
});
};
and the PHP:
<?php
sleep(.5);
//Sanitize incoming data and store in variable
//customer info
$name = trim(stripslashes(htmlspecialchars($_POST['cusName'])));
$address = trim(stripslashes(htmlspecialchars($_POST['cusAddress'])));
$city = trim(stripslashes(htmlspecialchars($_POST['city'])));
$state = trim(stripslashes(htmlspecialchars($_POST['state'])));
$zip = trim(stripslashes(htmlspecialchars($_POST['zip'])));
$homePhone = trim(stripslashes(htmlspecialchars($_POST['homePhone'])));
$homePhoneLink = preg_replace('/\\D+/', '', $homePhone);
$workPhone = trim(stripslashes(htmlspecialchars($_POST['workPhone'])));
$workPhoneLink = preg_replace('/\\D+/', '', $workPhone);
$cellPhone = trim(stripslashes(htmlspecialchars($_POST['cellPhone'])));
$cellPhoneLink = preg_replace('/\\D+/', '', $cellPhone);
//vehicle info
$year = trim(stripslashes(htmlspecialchars($_POST['year'])));
$make = trim(stripslashes(htmlspecialchars($_POST['make'])));
$model = trim(stripslashes(htmlspecialchars($_POST['model'])));
$bodyStyle = trim(stripslashes(htmlspecialchars($_POST['bodyStyle'])));
$vin = trim(stripslashes(htmlspecialchars($_POST['vin'])));
$damagedGlass = trim(stripslashes(htmlspecialchars($_POST['damagedGlass'])));
//insurance info
$insCompany = trim(stripslashes(htmlspecialchars($_POST['insCompany'])));
$agency = trim(stripslashes(htmlspecialchars($_POST['agency'])));
$policy = trim(stripslashes(htmlspecialchars($_POST['policy'])));
$sentBy = trim(stripslashes(htmlspecialchars($_POST['sentBy'])));
$compCoverage = trim(stripslashes(htmlspecialchars($_POST['compCoverage'])));
$deductible = trim(stripslashes(htmlspecialchars($_POST['deductible'])));
$dateOfLoss = trim(stripslashes(htmlspecialchars($_POST['dateOfLoss'])));
$causeOfLoss = trim(stripslashes(htmlspecialchars($_POST['causeOfLoss'])));
$replyEmail = trim(stripslashes(htmlspecialchars($_POST['replyEmail'])));
$specialInstructions = trim(stripslashes(htmlspecialchars($_POST['specialInstructions'])));
//spam filters
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
if ($honeypot == 'http://' && empty($humancheck)) {
//Validate data and return success or error message
$error_message = '';
$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z.]{2,4}$/";
if (empty($name)) {
$error_message .= "<p>Customer name is required.</p>";
}
if (empty($address)) {
$error_message .= "<p>Customer address is required.</p>";
}
if (empty($city)) {
$error_message .= "<p>Customer city is required.</p>";
}
if (empty($state)) {
$error_message .= "<p>Customer state is required.</p>";
}
if (empty($zip)) {
$error_message .= "<p>Customer zip is required.</p>";
}
if (empty($homePhone) || empty($workPhone) || empty($cellPhone)) {
$error_message .= "<p>Please provide at least one phone number for the customer.</p>";
}
if (empty($year)) {
$error_message .= "<p>Vehicle year is required.</p>";
}
if (empty($make)) {
$error_message .= "<p>Vehicle make is required.</p>";
}
if (empty($model)) {
$error_message .= "<p>Vehicle model is required.</p>";
}
if (empty($bodyStyle)) {
$error_message .= "<p>Vehicle body style is required.</p>";
}
if (empty($vin)) {
$error_message .= "<p>Vehicle VIN number is required.</p>";
}
if (empty($damagedGlass)) {
$error_message .= "<p>Vehicle\\'s damaged glass is required.</p>";
}
if (empty($insCompany)) {
$error_message .= "<p>Insurance company is required.</p>";
}
if (empty($agency)) {
$error_message .= "<p>Insurance agency is required.</p>";
}
if (empty($policy)) {
$error_message .= "<p>Policy number is required.</p>";
}
if (empty($sentBy)) {
$error_message .= "<p>The \\"sent by\\" field is required.</p>";
}
if (empty($compCoverage)) {
$error_message .= "<p>Comp Coverage is required.</p>";
}
if (empty($deductible)) {
$error_message .= "<p>Deductible ammount is required.</p>";
}
if (empty($dateOfLoss)) {
$error_message .= "<p>Date of loss is required.</p>";
}
if (empty($causeOfLoss)) {
$error_message .= "<p>Cause of loss is required.</p>";
}
if (!preg_match($reg_exp, $replyEmail)) {
$error_message .= "<p>A valid reply email address is required.</p>";
}
if (!empty($error_message)) {
$return['error'] = true;
$return['msg'] = '<div class="alert alert-danger">'."<h4>Oops! The request was successful but your form is not filled out correctly.</h4>".$error_message;
echo json_encode($return);
exit();
}
else {
//mail variables
$to = 'my@email.com';
$from = $_POST['replyEmail'];
$headers = 'From: '.$from."\\r\
";
$headers .= 'MIME-Version: 1.0' . "\\r\
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\\r\
";
$subject = "Glass Referral From Website\
";
$body = '<h4>Customer Information</h4>';
$body .= '<p>Name: '.$name."<br />";
$body .= 'Address: '.$address.'; '.$city.', '.$state.' '.$zip.'<br />';
if(isset ($homePhone) && $homePhone != '') {
$body .= 'Home Phone: '.'<a href="tel:+1'.$homePhoneLink.'">'.$homePhone."</a><br />";
}
if(isset ($workPhone) && $workPhone != '') {
$body .= 'Work Phone: '.'<a href="tel:+1'.$workPhoneLink.'">'.$workPhone."</a><br />";
}
if(isset ($cellPhone) && $cellPhone != '') {
$body .= 'Cell Phone: '.'<a href="tel:+1'.$cellPhoneLink.'">'.$cellPhone."</a><br />";
}
$body .= '</p>';
$body .= '<h4>Vehicle Information</h4>';
$body .= 'Year: '.$year.'<br />';
$body .= 'Make: '.$make.'<br />';
$body .= 'Model: '.$model.'<br />';
$body .= 'Body Style: '.$bodyStyle.'<br />';
$body .= 'VIN: '.$vin.'<br />';
$body .= 'Damaged Glass: '.$damagedGlass.'</p>';
$body .= '<h4>Insurance Information</h4>';
$body .= 'Ins. Company: '.$insCompany.'<br />';
$body .= 'Agency: '.$agency.'<br />';
$body .= 'Policy #'.$policy.'<br />';
$body .= 'Sent By: '.$sentBy.'<br />';
$body .= 'Comp Coverage: '.$compCoverage.'<br />';
$body .= 'Deductible: '.$deductible.'<br />';
$body .= 'Date of Loss: '.$dateOfLoss.'<br />';
$body .= 'Cause of Loss: '.$causeOfLoss.'<br />';
$body .= 'Reply Email: <a href="mailto:'.$replyEmail.'">'.$replyEmail.'</a><br />';
$body .= 'Special Instructions: '.$specialInstructions.'</p>';
//send email and return a message to user
if(mail($to, $subject, $body, $headers)) {
$return['error'] = false;
$return['msg'] =
'<div class="alert alert-success">'.
"<h4>Thank you for using our form ".$sentBy ."</h4>".
"<p>We'll reply to you at ".$email." as soon as we can.</p>";
echo json_encode($return);
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem sending the email. Please try again.</h4>";
echo json_encode($return);
}
}
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem with your submission. Please try again.</h4>";
echo json_encode($return);
}
?>
Being that i’m still a javascript noob, i’m not sure where i should add that logic in… any suggestions?
Thanks again in advance,
Jason
**Update:
I’ve tried to solve this issue by adding
onsubmit="$('form #response').focus()"
to the form, but it doesn’t seem to be working. Is there a better way to force the #response div to get focus when the form is submitted?