Forums

bor003

Hello,
At the moment I have a contact form (will post all the code below), I use the AJAX function in jQuery to post all the information over to the PHP file but then I would like it to post back varibles not HTML. The reason for this is that I would like a var allDone which will = false but if it is all good then I know which animation path to take. IE fade back in and flash or just fade out and say thanks!
Can this be done?

Here is my code :)
HTML

			<div id=\"theyFill\">
					<!-- Name -->
					<label class=\"label\" for=\"name\">Name:</label><br />
					<input type=\"text\" name=\"name\" id=\"name\" class=\"smallInput req\" /><br />
					<!-- Email -->
					<label class=\"label\" for=\"email\">Email:</label><br />
					<input type=\"text\" name=\"email\" id=\"email\" class=\"smallInput req\" /><br />
					<!-- Subject -->
					<label class=\"label\" for=\"subject\">Subject:</label><br />
					<input type=\"text\" name=\"subject\" id=\"subject\" class=\"smallInput req\" /><br />
					
				
					<label class=\"label\" for=\"message\">Message:</label><br />
					<textarea id=\"message\" class=\"largeInput req\" cols=\"40\" rows=\"7\" name=\"message\"></textarea><br />
					
					<br />
					<input type=\"image\" tabindex=\"2\" id=\"submit\" value=\"Submit\" name=\"submit\" src=\"send.png\"/>	
			</div><!-- they fill -->
		<div class=\"loader\"></div>
		<div id=\"results\">
		
		<h1></h1>
               </div>

JQUERY

$(function(){
	$('input#submit').click(function(){
	$('.loader').fadeIn(\"slow\");
	$('input#submit').fadeOut(\"fast\");
	$('#theyFill').animate({opacity: 0.3}, 500);
	
		var name = $('input#name').val();
		var email = $('input#email').val();
		var subject = $('input#subject').val();
		var message = $('textarea#message').val();
	
	
	var allDone = false;
	
	
	$.ajax({
		type: 'post',
		url: 'theSender.php',
		data: 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message + '&allDone' + allDone,
		
		
		success: function(results){
			
			$('.loader').fadeOut('slow');
			$('input#submit').animate({opacity: 1.0}, 3000).fadeIn(\"slow\");
			
				
				if(allDone == true){
					$('#results').html(\"allDone is now true\");
				}else{
				
					$('#results').html(\"allDone is still false\");
				}
				//$('#results').html(results);
			
			}
			});// end of ajax
});
});

And the PHP

<?php 
	
	$name = $_POST['name'];
	$email = $_POST['email'];
	$subject = $_POST['subject'];
	$message = $_POST['message'];
	$myEmail = 'MY@EMAIL.com';
	$allDone = $_POST['allDone'];
if (strlen($name) < 1) {
		$error['name'] = \"Please enter your name in the required field\";	
	}
	if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
		$error['email'] = \"Please enter a valid email address\";	
	}
	if (strlen($subject) < 1) {
		$error['subject'] = \"Please enter a subject.\";	
	}
	if (strlen($message) < 1) {
		$error['message'] = \"Please write me a message.\";	
	}
	if($error == NULL){
		$doneIt = true;
		$Body = \"\";
		$Body .= \"Name: \";
		$Body .= $name;
		$Body .= \"\n\";
		$Body .= \"Email: \";
		$Body .= $email;
		$Body .= \"\n\";
		$Body .= \"Message: \";
		$Body .= $message;
		$Body .= \"\n\";
		$Body .= \"SEND FROM WEB FORM\";		
		// 		to, 		sub, 	body, 	headers, 			params
		mail($myEmail, $subject, $Body, \"From: <$email>\");
		echo \"var allDone = true\";
		}
else{
		$response = (isset($error['name'])) ? \"<div class='nameError'>\" . $error['name'] . \"</div> \n\" : null;
		$response .= (isset($error['email'])) ? \"<div class='emailError'>\" . $error['email'] . \"</div> \n\" : null;
		$response .= (isset($error['subject'])) ? \"<div class='subjectError'>\" . $error['subject'] . \"</div>\" : null;
		$response .= (isset($error['message'])) ? \"<div class='messageError'>\" . $error['message'] . \"</div> \n\" : null;
		echo $response;
	}
?>

Thanks for any help :)

davesgonebananas

This is easily enough achieved. You simple specify a dataType option of "json" in your jQuery ajax call and have your php script return a json object instead of an html fragment.

   $.ajax({
      type: 'post',
      url: 'theSender.php',
      dataType: 'json',
      ... snip

   echo(json_encode(array(
      'allDone' => TRUE,
      'response' => $response
   )));

http://docs.jquery.com/Specifying_the_D ... X_Requests

bor003

Just got back after my month and was very pleased to get this reply!

Thanks so much for your help :)!

treehouse : what would you like to learn today?

Forums

Post varible from PHP to awating AJAX jQuery?