ajax form submit button not working.

This site is best viewed in a modern browser with JavaScript enabled.

Nicholas_Diaz

reset works form fields work but when i click submit nothing happens.
here is my code

Main page with form on it

<?php $page = 'appEnglish'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">

<title>English Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ajax_submit.js"></script>

</head>

<form id="english1" name="english1" id="english1" method="POST" form action="actions/appSubmit.php" enctype="multipart/form-data">
<div id="response"></div>

<h1>Application For Employment</h1>
Date:  <input type="text" name="date" id="date" />    Position: <input type="text" name="position" id="position" />    Email: <input type="text" name="email" />

By signing I confirm that I have read, understand and insure all the information provided on this application is correct.
<br /><br />
Signature Of Applicant: <input type="text" name="signature" id="signature" />    Date: <input type="text" name="datesign" id="datesign" /> <input name="submit" id="submit" value="Submit Application" />  <input type="reset" name="reset" value="Reset All Fields"/>

<div class="inputs">
<input type="hidden" name="honeypot" id="honeypot" value="http://" />

<input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />
</form>
</div>
  </div>
</div>
</div>
</div>

<div class="wrapper col4">
<?php
include("includes/footer.php")
?>
</div>
</body>
</html>

php submit to email for to admin

<?php
sleep(2);
//Sanitize incoming data and store in variable

$date = trim(stripslashes(htmlspecialchars ($POST['date'])));
$position = trim(stripslashes(htmlspecialchars ($POST['position'])));
$email = trim(stripslashes(htmlspecialchars ($POST['email'])));
$experience = trim(stripslashes(htmlspecialchars ($POST['experience'])));
$fname = trim(stripslashes(htmlspecialchars ($POST['fname'])));
$lname = trim(stripslashes(htmlspecialchars ($POST['lname'])));
$mname = trim(stripslashes(htmlspecialchars ($POST['mname'])));
$dob = trim(stripslashes(htmlspecialchars ($POST['dob'])));
$dl = trim(stripslashes(htmlspecialchars ($POST['dl'])));
$address = trim(stripslashes(htmlspecialchars ($POST['address'])));
$city = trim(stripslashes(htmlspecialchars ($_POST['city'])));

$humancheck = $POST['humancheck'];
$honeypot = $POST['honeypot'];

if ($honeypot == 'http://' && empty($humancheck)) {
	//Validate data and return success or error message
	$error_message = '';	
	}
	if (empty($fname)) {

			    $error_message .= "<p>Please provide your first name, provide at least 2 characters in this field.</p>";	

	if (empty($lname)) {

			    $error_message .= "<p>Please provide your last name, provide at least 2 characters in this field.</p>";			   
	}
	if (empty($telephone)) {

			    $error_message .= "<p>Please provide your phone number with area code.</p>";			   
	}				
	if (empty($cell)) {

				$error_message .= "<p>Please provide cell with area code</p>";
	}	
		if (empty($signature)) {

				$error_message .= "<p>Please provide E signature</p>";
	}				
	$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";

	if (!preg_match($reg_exp, $email)) {

				$error_message .= "<p>A valid email address is required.</p>";			   
	}


	if (!empty($error_message)) {
				$return['error'] = true;
				$return['msg'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>"
				.$error_message;					
				echo json_encode($return);
				exit();

	} else {

			//Prepare information from form to be sent
			$to = 'admin@skylinestaffingservices.com';
			$from = 'admin@skylinestaffingservices.com';	
			$headers = 'MIME-VERSION: 1.0' . '\n';
			$headers .= 'From: $from' . '\n';	
			$subject = 'New Application Submission';
			$body = 'Date: ' .$date . PHP_EOL;
			$body .= 'Position: ' .$position . PHP_EOL;
			$body .= 'Email: ' .$email . PHP_EOL;
			$body .= 'Experience: ' .$experience . PHP_EOL;
			$body = 'Name: ' .$fname . PHP_EOL;
			$body .= 'Last Name: ' .$lname . PHP_EOL;
			$body .= 'Middle Name: ' .$mname . PHP_EOL;
			$body .= 'DOB: ' .$dob . PHP_EOL;
			$body = 'DL: ' .$dl . PHP_EOL;
			$body .= 'Address: ' .$address . PHP_EOL;
			$body .= 'city: ' .$city . PHP_EOL;
			$body .= 'State: ' .$state . PHP_EOL;
			$body = 'Zip: ' .$zip . PHP_EOL;
			$body .= 'telephone: ' .$telephone . PHP_EOL;
			$body .= 'cell: ' .$cell . PHP_EOL;
			$body .= 'Emergency Name: ' .$ename . PHP_EOL;
			$body = 'Emergency Last Name: ' .$elname . PHP_EOL;
			$body .= 'Emergency Phone: ' .$ephone . PHP_EOL;
			$body .= 'Emergency Cell: ' .$ecell . PHP_EOL;
			$body .= 'Availability: ' .$availability . PHP_EOL;
			$body = 'Previously Worked For SSS: ' .$previous . PHP_EOL;
			$body .= 'Company: ' .$company . PHP_EOL;
			$body .= 'Title: ' .$title . PHP_EOL;
			$body .= 'Supervisor: ' .$supervisor . PHP_EOL;
			$body .= 'Supervisor Phone Number: ' .$supervisorphone . PHP_EOL;
			$body .= 'Reason For Leaving: ' .$leaving . PHP_EOL;
			$body .= 'Gender: ' .$sex . PHP_EOL;
			$body .= 'Documents To Work: ' .$proof . PHP_EOL;
			$body .= 'E Signature: ' .$signature . PHP_EOL;
			$body .= 'E Date: ' .$datesign . PHP_EOL;

			// Form data was successfull so we will now send admin email and return message to the user
			if(mail($to, $subject, $body, $headers, '-f [email]admin@skylinestaffingservices.com[/email]')) { 

				$return['error'] = false;
				$return['msg'] = "<p>We will be in touch soon " .$fname .".</p>"; 
				echo json_encode($return);

	} else {

$return['error'] = true;
$return['msg'] = "<h3>Oops! We are having trouble submitting your application. Please try us directly at [email]admin@skylinestaffingservices.com[/email]</h3>";	
echo json_encode($return);
	}
	}
}

?>

java script code

$(document).ready(function() {
$('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 required = ' is required.';
	var fname = $('form #fname').val();
	var lname = $('form #lname').val();
	var telephone = $('form #telephone').val();
	var cell = $('form #cell').val();
	var email = $('form #email').val();
	var signature = $('form #signature').val();

	// perform error checking
	if (fname = '' || fname.length <= 2) {
		valid = '<p>Your first name' + required +'</p>';	
	}

	if (lname = '' || lname.length <= 2) {
		valid = '<p>Your last name' + required +'</p>';	
	}

	if (telephone = '' || telephone.length  <= 7) {
		valid = '<p>Your phone' + required +'</p>';


	}

	if (cell = '' || cell.length <= 7) {		
		valid = '<p>Your telephone ' + required +'</p>';


    }

	if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
		valid += '<p>Your email' + required +'</p>';												  
	}


	if (signature = '' || message.length <= 5) {
		valid += '<p>Your signature' + required + '</p>';	

	}

	// let the user know if there are erros with the form
	if (valid != '') {

		$('form #response').removeClass().addClass('error')
			.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');			
	}
	// 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('Sending message...').fadeIn('normal');										

		var formData = $('form').serialize();
		submitForm(formData);			
	}			

});
});

// make our ajax request to the server
function submitForm(formData) {
$.ajax({	
	type: 'POST',
	url: 'actions/appSubmit.php',		
	data: formData,
	dataType: 'json',
	cache: false,
	timeout: 7000,
	success: function(data) { 			

		$('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('<p>There was a<strong> ' + errorThrown +
						  '</strong> error due to a<strong> ' + textStatus +
						  '</strong> condition.</p>').fadeIn('fast');			
	},				
	complete: function(XMLHttpRequest, status) { 			

		$('form')[0].reset();
	}
});	
};

Padonak

make sure that your form has all the fields mentioned in your script

 // grab form field values
 var valid = '';
 var required = ' is required.';
 var fname = $('form #fname').val();
 var lname = $('form #lname').val();
 var telephone = $('form #telephone').val();
 var cell = $('form #cell').val();
 var email = $('form #email').val();
 var signature = $('form #signature').val();

and please use the code tags for posting code

Nicholas_Diaz

Thank you for your reply. It does have all the fields. the button does not even process the js file to say im missing fields...

and please tell me how to use the code tag to insert code. I have not been able to figure that out

Padonak

[ code ]here goes you code[ /code ] use these tags without spaces inside the brackets (i put the spaces to make the tags be visible)
use the Opera error console/Firefox Firebug/or any other available debugger to see the errors you are getting
you say that the form has all the fields? then show me please where is the input having id="fname" or the input having id="lname"? from the code you provided i can see fields having the following id's:date,position,signature,datesign,honeypot,humancheck. the field "email" has only name attribute but no id. if you were using a debugger you could see a message like this:

Event thread: click
Uncaught exception: TypeError: Cannot convert 'fname' to object
Error thrown at line 22, column 1 in <anonymous function>(e) in http://localhost/sec/diaz/diaz_submit/js/ajax_submit.js:
    if (fname = '' || fname.length <= 2)

Nicholas_Diaz

  

<?php $page = 'appEnglish'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">

<title>English Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ajax_submit.js"></script>

</head>
<body id="top">
<!-- ####################################################################################################### -->
<div class="wrapper col1">


</div>
<br class="clear" />
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col2">
  <div id="breadcrumb">
    <ul>

</ul>
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col3">
  <div id="container">
          <center><h1>Application For Employment English</h1></center>

  <div id="inner-wrapper">




  <div id="respond">

<form id="english1" name="english1" id="english1" method="POST" form action="actions/appSubmit.php" enctype="multipart/form-data"> 
 <div id="response"><!--This will hold our error messages and the response from the server. --></div>  

<h1>Application For Employment</h1>
Date:&nbsp; <input type="text" name="date" id="date" /> &nbsp;&nbsp; Position:&nbsp;<input type="text" name="position" id="position" /> &nbsp;&nbsp; Email:&nbsp;<input type="text" name="email" />
<br /> <br />
Experience:&nbsp;<textarea name="experience" id="experience"></textarea>
<br /> <br />
<h2>Personal Information</h2>
<br /> <br />
Last Name:&nbsp;<input type="text" name="lname" id="lname" /> &nbsp;&nbsp;   First Name:&nbsp;<input type="text" name="fname" id="fname" />   &nbsp;&nbsp;   Middle Name:&nbsp;<input type="text" name="mname" id="mname" />  

 <br /> <br />
 Date Of Birth:&nbsp;<input type="text" name="dob" id="dob" />   &nbsp;&nbsp;   Drivers License #:&nbsp;<input type="text" name="dl" id="dl" /> 
 <br /> <br />
 <h3>Address</h3>
 Address:&nbsp;<input type="text" name="address" id="address" />
 <br /> <br />
 City:&nbsp;<input type="text" name="city" id="city" /> &nbsp;&nbsp; State:&nbsp;<input type="text" name="state" id="state" /> &nbsp;&nbsp; Zip Code:&nbsp;<input type="text" name="zip" id="zip" />
 <br /> <br />
 Telephone #:&nbsp;<input type="text" name="telephone" id="telephone" />  &nbsp;&nbsp;  Cell Phone #:&nbsp;<input type="text" name="cell" id="cell" />
    <br /> <br />
   <h3>Emergency Contact</h3>
First Name:&nbsp;<input type="text" name="ename" id="ename" />  Last Name:&nbsp;<input type="text" name="elname" id="elname" />  &nbsp;&nbsp; Relationship:&nbsp;<input type="text" name="relationship" id="relationship" />   

<br /> <br />
Telephone #:&nbsp;<input type="text" name="ephone" id="ephone" /> &nbsp;&nbsp; Cell Phone #:&nbsp;<input type="text" name="ecell" id="ecell" />    

<br /> <br />
 <h3>Availability To Work</h3>
 Are You Available For All Shifts?&nbsp; <input type="radio" name="availability" id="availability" value="yes">Yes
<input type="radio" name="availability" id="availability" value="no">No<br> 
<br /> <br />
 Have You Worked for This Staffing Company before?&nbsp; <input type="radio" name="previous" id="previous" value="yes">Yes
<input type="radio" name="previous" id="previous" value="no">No 
<br /> <br />
<h3>Previouse Employment</h3>
Company:&nbsp;<input type="text" name="company" id="company" /> &nbsp;&nbsp; Title:&nbsp;<input type="text" name="title" id="title" />
<br /><br />
Name Of Supervisor:&nbsp;<input type="text" name="supervisor" id="supervisor" /> &nbsp;&nbsp; Supervisor Phone#:&nbsp;<input type="text" name="supervisorphone" id="supervisorphone" />
<br /> <br />
Reasons For Leaving:&nbsp;<textarea name="leaving" id="leaving"></textarea>
<br /> <br />
<h3>Equal Employment Opportunity</h3>
<p>
We do not discriminate against qualified applicants based upon any protected group status, including but not limited to 
race, color, creed, religion, sex (except where it is a bona fide occupational qualification), national origin, ancestry, age,
marital status, military or veteran status, sexual orientation, physical or mental disability or medical condition as defined
by applicable equal opportunity laws. </p>
<p>
To help us comply with federal/state equal opportunity record keeping, reporting and other legal requirements, we 
would appreciate you voluntarily providing the information below.</p>
<p>
I certify that the information on this application is correct and I understand that any misrepresentation or omission of 
any information will result in my disqualification from consideration for employment or, if employed, my dismissal.  I 
understand that this application is not a contract, offer, or promise of employment and that if hired, I will be able to 
resign at any time for any reason. Likewise, the company can terminate my employment at any time with or without 
cause, unless otherwise required by law.</p>
<p>
Offers reasonable accommodation in the employment process for individuals with disabilities.  If you need assistance 
in the application or hiring process to accommodate a disability, you may request an accommodation at any time
</p> 
<br />
 <h3>Additional Information</h3>
Are You Male Or Female?
<br />
Male&nbsp; <input type="radio" name="sex" id="sex" value="male"> &nbsp;&nbsp;&nbsp;Female&nbsp; <input type="radio" name="sex" id="sex" value="female"> &nbsp;&nbsp;&nbsp;Choose Not To Respond&nbsp; <input type="radio" name="sex" id="sex" value="noresponse">
<br /> <br />
Can you Provide Proof Of Work Authorization In The United States&nbsp; <input type="radio" name="proof" id="proof" value="yes">Yes
<input type="radio" name="proof" id="proof" value="no">No 
 <br /> <br />
By signing I confirm that I have read, understand and insure all the information provided on this application is correct.
<br /><br />
Signature Of Applicant:&nbsp;<input type="text" name="signature" id="signature" /> &nbsp;&nbsp; Date:&nbsp;<input type="text" name="datesign" id="datesign" /> <input name="submit" id="submit" value="Submit Application" />&nbsp;&nbsp;<input type="reset" name="reset" value="Reset All Fields"/>    

<div class="inputs">
                    <input type="hidden" name="honeypot" id="honeypot" value="http://" />            

                    <input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />
        </form>
      </div>

  </div>
</div>
</div>
</div>



<!-- ####################################################################################################### -->
<div class="wrapper col4">
  <?php 
 include("includes/footer.php")
 ?>
</div>
</body>
</html>

Nicholas_Diaz

 



$(document).ready(function() {

$('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 required = ' is required.';
	var date = $('form #fname').val();
	var position = $('form #lname').val();
	var email = $('form #telephone').val();
	var experience = $('form #cell').val();
	var fname = $('form #email').val();
	var lname = $('form #signature').val();
	var mname = $('form #fname').val();
	var dob = $('form #lname').val();
	var dl = $('form #telephone').val();
	var address = $('form #cell').val();
	var city = $('form #email').val();
	var state = $('form #signature').val();
	var zip = $('form #fname').val();
	var telephone = $('form #lname').val();
	var cell = $('form #telephone').val();
	var ename = $('form #cell').val();
	var elname = $('form #email').val();
	var ephone = $('form #signature').val();	
	var ecell = $('form #fname').val();
	var availability = $('form #lname').val();
	var previouos = $('form #telephone').val();
	var company = $('form #cell').val();
	var title = $('form #email').val();
	var supervisor = $('form #signature').val();
	var supervisorphone = $('form #signature').val();
	var leaving = $('form #signature').val();
	var sex = $('form #signature').val();
	var proof = $('form #signature').val();
	var signature = $('form #signature').val();
	var datesign = $('form #signature').val();

		// perform error checking
	if (fname = '' || fname.length <= 2) {
		valid = '<p>Your first name' + required +'</p>';	
	}

	if (lname = '' || lname.length <= 2) {
		valid = '<p>Your last name' + required +'</p>';	
	}

	if (telephone = '' || telephone.length  <= 7) {
		valid = '<p>Your phone' + required +'</p>';


	}

	if (cell = '' || cell.length <= 7) {		
		valid = '<p>Your telephone ' + required +'</p>';


    }

	if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
		valid += '<p>Your email' + required +'</p>';												  
	}


	if (signature = '' || message.length <= 5) {
		valid += '<p>Your signature' + required + '</p>';	

	}

	// let the user know if there are erros with the form
	if (valid != '') {

		$('form #response').removeClass().addClass('error')
			.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');			
	}
	// 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('Sending message...').fadeIn('normal');										

		var formData = $('form').serialize();
		submitForm(formData);			
	}			

});
});

// make our ajax request to the server
function submitForm(formData) {

$.ajax({	
	type: 'POST',
	url: 'actions/appSubmit.php',		
	data: formData,
	dataType: 'json',
	cache: false,
	timeout: 7000,
	success: function(data) { 			

		$('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('<p>There was a<strong> ' + errorThrown +
						  '</strong> error due to a<strong> ' + textStatus +
						  '</strong> condition.</p>').fadeIn('fast');			
	},				
	complete: function(XMLHttpRequest, status) { 			

		$('form')[0].reset();
	}
});	
};

Nicholas_Diaz

 <?php 
sleep(2);
//Sanitize incoming data and store in variable

$date =  trim(stripslashes(htmlspecialchars ($_POST['date'])));		
$position =  trim(stripslashes(htmlspecialchars ($_POST['position'])));	
$email =  trim(stripslashes(htmlspecialchars ($_POST['email'])));	
$experience = trim(stripslashes(htmlspecialchars ($_POST['experience'])));	
$fname =  trim(stripslashes(htmlspecialchars ($_POST['fname'])));	
$lname =  trim(stripslashes(htmlspecialchars ($_POST['lname'])));	
$mname =  trim(stripslashes(htmlspecialchars ($_POST['mname'])));	
$dob =  trim(stripslashes(htmlspecialchars ($_POST['dob'])));	
$dl =  trim(stripslashes(htmlspecialchars ($_POST['dl'])));	
$address =  trim(stripslashes(htmlspecialchars ($_POST['address'])));	
$city =  trim(stripslashes(htmlspecialchars ($_POST['city'])));	
$state =  trim(stripslashes(htmlspecialchars ($_POST['state'])));	
$zip =  trim(stripslashes(htmlspecialchars ($_POST['zip'])));	
$telephone =  trim(stripslashes(htmlspecialchars ($_POST['telephone'])));	
$cell =  trim(stripslashes(htmlspecialchars ($_POST['cell'])));	
$ename =  trim(stripslashes(htmlspecialchars ($_POST['ename'])));	
$elname =  trim(stripslashes(htmlspecialchars ($_POST['elname'])));	
$ephone =  trim(stripslashes(htmlspecialchars ($_POST['ephone'])));	
$ecell =  trim(stripslashes(htmlspecialchars ($_POST['ecell'])));	
$availability =  trim(stripslashes(htmlspecialchars ($_POST['availability'])));	
$previous =  trim(stripslashes(htmlspecialchars ($_POST['previous'])));	
$company =  trim(stripslashes(htmlspecialchars ($_POST['company'])));	
$title =  trim(stripslashes(htmlspecialchars ($_POST['title'])));	
$supervisor =  trim(stripslashes(htmlspecialchars ($_POST['supervisor'])));	
$supervisorphone =  trim(stripslashes(htmlspecialchars ($_POST['supervisorphone'])));	
$leaving =  trim(stripslashes(htmlspecialchars ($_POST['leaving'])));	
$sex =  trim(stripslashes(htmlspecialchars ($_POST['sex'])));	
$proof =  trim(stripslashes(htmlspecialchars ($_POST['proof'])));	
$signature =  trim(stripslashes(htmlspecialchars ($_POST['signature'])));	
$datesign =  trim(stripslashes(htmlspecialchars ($_POST['datesign'])));	
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];


if ($honeypot == 'http://' && empty($humancheck)) {		

	//Validate data and return success or error message
	$error_message = '';	
	}
	if (empty($fname)) {

			    $error_message .= "<p>Please provide your first name, provide at least 2 characters in this field.</p>";	

	if (empty($lname)) {

			    $error_message .= "<p>Please provide your last name, provide at least 2 characters in this field.</p>";			   
	}
	if (empty($telephone)) {

			    $error_message .= "<p>Please provide your phone number with area code.</p>";			   
	}				
	if (empty($cell)) {

				$error_message .= "<p>Please provide cell with area code</p>";
	}	
		if (empty($signature)) {

				$error_message .= "<p>Please provide E signature</p>";
	}				
	$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";

	if (!preg_match($reg_exp, $email)) {

				$error_message .= "<p>A valid email address is required.</p>";			   
	}


	if (!empty($error_message)) {
				$return['error'] = true;
				$return['msg'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>"
				.$error_message;					
				echo json_encode($return);
				exit();

	} else {

			//Prepare information from form to be sent
			$to = 'admin@skylinestaffingservices.com';
			$from = 'admin@skylinestaffingservices.com';	
			$headers = 'MIME-VERSION: 1.0' . '\n';
			$headers .= 'From: $from' . '\n';	
			$subject = 'New Application Submission';
			$body = 'Date: ' .$date . PHP_EOL;
			$body .= 'Position: ' .$position . PHP_EOL;
			$body .= 'Email: ' .$email . PHP_EOL;
			$body .= 'Experience: ' .$experience . PHP_EOL;
			$body = 'Name: ' .$fname . PHP_EOL;
			$body .= 'Last Name: ' .$lname . PHP_EOL;
			$body .= 'Middle Name: ' .$mname . PHP_EOL;
			$body .= 'DOB: ' .$dob . PHP_EOL;
			$body = 'DL: ' .$dl . PHP_EOL;
			$body .= 'Address: ' .$address . PHP_EOL;
			$body .= 'city: ' .$city . PHP_EOL;
			$body .= 'State: ' .$state . PHP_EOL;
			$body = 'Zip: ' .$zip . PHP_EOL;
			$body .= 'telephone: ' .$telephone . PHP_EOL;
			$body .= 'cell: ' .$cell . PHP_EOL;
			$body .= 'Emergency Name: ' .$ename . PHP_EOL;
			$body = 'Emergency Last Name: ' .$elname . PHP_EOL;
			$body .= 'Emergency Phone: ' .$ephone . PHP_EOL;
			$body .= 'Emergency Cell: ' .$ecell . PHP_EOL;
			$body .= 'Availability: ' .$availability . PHP_EOL;
			$body = 'Previously Worked For SSS: ' .$previous . PHP_EOL;
			$body .= 'Company: ' .$company . PHP_EOL;
			$body .= 'Title: ' .$title . PHP_EOL;
			$body .= 'Supervisor: ' .$supervisor . PHP_EOL;
			$body .= 'Supervisor Phone Number: ' .$supervisorphone . PHP_EOL;
			$body .= 'Reason For Leaving: ' .$leaving . PHP_EOL;
			$body .= 'Gender: ' .$sex . PHP_EOL;
			$body .= 'Documents To Work: ' .$proof . PHP_EOL;
			$body .= 'E Signature: ' .$signature . PHP_EOL;
			$body .= 'E Date: ' .$datesign . PHP_EOL;

			// Form data was successfull so we will now send admin email and return message to the user
			if(mail($to, $subject, $body, $headers, '-f admin@skylinestaffingservices.com')) { 

				$return['error'] = false;
				$return['msg'] = "<p>We will be in touch soon " .$fname .".</p>"; 
				echo json_encode($return);

	} else {

$return['error'] = true;
$return['msg'] = "<h3>Oops! We are having trouble submitting your application. Please try us directly at admin@skylinestaffingservices.com</h3>";	
echo json_encode($return);
	}
	}

}

?>

Padonak

try this script

$(document).ready(function() {
$('#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 required = ' is required.';
var fname = $('#fname').val();
var lname = $('#lname').val();
var telephone = $('#telephone').val();
var cell = $('#cell').val();
var email = $('#email').val();
var signature = $('#signature').val();

// perform error checking
if(fname == '' || fname.length <= 2){
valid = '<p>Your first name' + required +'</p>'; 
}

if(lname == '' || lname.length <= 2){
valid = '<p>Your last name' + required +'</p>'; 
}

if(telephone == '' || telephone.length <= 7){
valid = '<p>Your phone' + required +'</p>';
}

if(cell == '' || cell.length <= 7){ 
valid = '<p>Your telephone ' + required +'</p>';
}

if(!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)){
valid += '<p>Your email' + required +'</p>'; 
}

if(signature == '' || message.length <= 5){
valid += '<p>Your signature' + required + '</p>'; 
}

// let the user know if there are erros with the form
if(valid != ''){
$('#response').removeClass().addClass('error').html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal'); 
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else{
$('#response').removeClass().addClass('processing').html('Sending message...').fadeIn('normal'); 
var formData = $('form').serialize();
submitForm(formData); 
} 

});
});

// make our ajax request to the server
function submitForm(formData){
$.ajax({ 
type: 'POST',
url: 'actions/appSubmit.php', 
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data){
$('#response').removeClass().addClass((data.error === true) ? 'error' : 'success').html(data.msg).fadeIn('fast'); 
if($('#response').hasClass('success')){
setTimeout("$('#response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#response').removeClass().addClass('error').html('<p>There was a<strong> ' + errorThrown +'</strong> error due to a<strong> ' + textStatus +'</strong> condition.</p>').fadeIn('fast');
}, 
complete: function(XMLHttpRequest, status){$('form')[0].reset();}
}); 
};

Nicholas_Diaz

is it necessary in the js file to grab all form fields or only the ones your checking?

Nicholas_Diaz

the code you gave me didnt work....

Padonak

for me the code works good. make sure that the code has no lines like this

$('#response').removeClass()
.addClass('processing').html('Sending 
message...').fadeIn('normal');

$('#response').removeClass().addClass('error')
.html('<p>There was a<strong> ' 
+ errorThrown +'</strong> error due to a<strong> ' 
+ textStatus +'</strong> condition.</p>').fadeIn('fast');

all such lines must not have linebreaks

Nicholas_Diaz

should i be putting every value on the form in the .js file? or only the ones that im checking for errors?

on the php form i have 20 something values on the .js only the ones that need to be filled in...

if you look back through my code you will see what im talking about... this is my current .js file

  

$(document).ready(function() {

$('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 required = ' is required.';
	var date = $('form #fname').val();
	var position = $('form #lname').val();
	var email = $('form #telephone').val();
	var experience = $('form #cell').val();
	var fname = $('form #email').val();
	var lname = $('form #signature').val();
	var mname = $('form #fname').val();
	var dob = $('form #lname').val();
	var dl = $('form #telephone').val();
	var address = $('form #cell').val();
	var city = $('form #email').val();
	var state = $('form #signature').val();
	var zip = $('form #fname').val();
	var telephone = $('form #lname').val();
	var cell = $('form #telephone').val();
	var ename = $('form #cell').val();
	var elname = $('form #email').val();
	var ephone = $('form #signature').val();	
	var ecell = $('form #fname').val();
	var availability = $('form #lname').val();
	var previouos = $('form #telephone').val();
	var company = $('form #cell').val();
	var title = $('form #email').val();
	var supervisor = $('form #signature').val();
	var supervisorphone = $('form #signature').val();
	var leaving = $('form #signature').val();
	var sex = $('form #signature').val();
	var proof = $('form #signature').val();
	var signature = $('form #signature').val();
	var datesign = $('form #signature').val();

		// perform error checking
	if (fname = '' || fname.length <= 2) {
		valid = '<p>Your first name' + required +'</p>';	
	}

	if (lname = '' || lname.length <= 2) {
		valid = '<p>Your last name' + required +'</p>';	
	}

	if (telephone = '' || telephone.length  <= 7) {
		valid = '<p>Your phone' + required +'</p>';


	}

	if (cell = '' || cell.length <= 7) {		
		valid = '<p>Your telephone ' + required +'</p>';


    }

	if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
		valid += '<p>Your email' + required +'</p>';												  
	}


	if (signature = '' || message.length <= 5) {
		valid += '<p>Your signature' + required + '</p>';	

	}

	// let the user know if there are erros with the form
	if (valid != '') {

		$('form #response').removeClass().addClass('error')
			.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal');			
	}
	// 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('Sending message...').fadeIn('normal');										

		var formData = $('form').serialize();
		submitForm(formData);			
	}			

});
});

// make our ajax request to the server
function submitForm(formData) {

$.ajax({	
	type: 'POST',
	url: 'actions/appSubmit.php',		
	data: formData,
	dataType: 'json',
	cache: false,
	timeout: 7000,
	success: function(data) { 			

		$('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('<p>There was a<strong> ' + errorThrown +
						  '</strong> error due to a<strong> ' + textStatus +
						  '</strong> condition.</p>').fadeIn('fast');			
	},				
	complete: function(XMLHttpRequest, status) { 			

		$('form')[0].reset();
	}
});	
};

Padonak

in the .js file you need only the fields that need to be checked i think

Nicholas_Diaz

both of those lines you referred to are in my code.. should i delete them? how will i give a response then?

Nicholas_Diaz

I think I found the problem. When I click on the submit button it puts my cursor in it and lets me edit the text. its not functioning as a button but as a field.... can you look at the html form and tell me what you see at the submit button location please.

Nicholas_Diaz

ok the button was input name for some reason... i changes it to input type but im still having the same problem... when you click the submit button nothing happens...

Nicholas_Diaz

it is for sure the .js file. cause when i take out the link to the .js file in the header the submit button works. should the action be to the php fille or to the .js file?

Nicholas_Diaz

but when i take the .js file out and submit the php file it goes to blank screen and does not send the email... I know this should work based it off of a contact form i made in ajax.. im assuming because there are so many fields im just missing something. someone please help...