JQuery portion of script no working

webguync · February 18, 2011

I have a script that is supposed to submit my form using process.php and deliver a success or failure message on the form page. The form does submit, but the JQuery portion is working. I just get a generic message from my process.php page that the form was submitted. I am not sure what is amiss, so was hoping someone might have some suggestions.

Here is the JQuery code.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
var J = jQuery.noConflict();

J(document).ready(function() {

//if submit button is clicked
J('#submit').click(function () {		

	//Get the data from all the fields
	var name = J('input[name=name]');
	var email = J('input[name=email]');
	var website = J('input[name=website]');
	var comment = J('textarea[name=comment]');

	//Simple validation to make sure user entered something
	//If error found, add hightlight class to the text field
	if (name.val()=='') {
		name.addClass('hightlight');
		return false;
	} else name.removeClass('hightlight');

	if (email.val()=='') {
		email.addClass('hightlight');
		return false;
	} else email.removeClass('hightlight');

	if (comment.val()=='') {
		comment.addClass('hightlight');
		return false;
	} else comment.removeClass('hightlight');

	//organize the data properly
	var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
	website.val() + '&comment='  + encodeURIComponent(comment.val());

	//disabled all the text fields
	J('.text').attr('disabled','true');

	//show the loading sign
	J('.loading').show();

	//start the ajax
	J.ajax({
		//this is the php file that processes the data and send mail
		url: "process.php",	

		//GET method is used
		type: "GET",

		//pass the data			
		data: data,		

		//Do not cache the page
		cache: false,

		//success
		success: function (html) {				
			//if process.php returned 1/true (send mail success)
			if (html==1) {					
				//hide the form
				J('.form').fadeOut('slow');					

				//show the success message
				J('.done').fadeIn('slow');

			//if process.php returned 0/false (send mail failed)
			} else alert('Sorry, unexpected error. Please try again later.');				
		}		
	});

	//cancel the submit button default behaviours
	return false;
});	
});	
</script>

the form code...

<!-- Start HTML form -->
   	<form id="form" action="process.php" method="post" name="ContactForm">

   	 <label for="Name">Name</label>
   	 <input type="text" name="name" id="name" />
   	 <label for="email">E-mail</label>
   	 <input type="text" name="email" id="email" />
     <label for="website">Website (example: http://www.yourwebsite.com) </label>
   	 <input type="text" name="website" id="website" />
      <label for="message">Message (resize the textarea if needed)</label>
   	 <textarea class="resizable" name="comment">
</textarea>
    	 <input type="submit" name="submit" id="submit" value="Submit">
    </form>

and the process.php code

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

//recipient
$to = 'My Name <email@gmail.com>';	
//sender
$from = $name . ' <' . $email . '>';

//subject and the html message
$subject = 'Comment from ' . $name;	
$message = '
<!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">
<head></head>
<body>
<table>
	<tr><td>Name</td><td>' . $name . '</td></tr>
	<tr><td>Email</td><td>' . $email . '</td></tr>
	<tr><td>Website</td><td>' . $website . '</td></tr>
	<tr><td>Comment</td><td>' . nl2br($comment) . '</td></tr>
</table>
</body>
</html>';

//send the mail
$result = sendmail($to, $subject, $message, $from);

//if POST was used, display the message straight away
if ($_POST) {
	if ($result) echo 'Thank you! I have received your message.';
	else echo 'Sorry, unexpected error. Please try again later';

//else if GET was used, return the boolean value so that 
//ajax script can react accordingly
//1 means success, 0 means failed
} else {
	echo $result;	
}

//if the errors array has values
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="form.php">Back</a>';
exit;
}


//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= 'From: ' . $from . "\r\n";

$result = mail($to,$subject,$message,$headers);

if ($result) {return 1;}
else {return 0;}
}

?>

again, the form submits fine, so there is no problem there, but the JQuery is being bypassed.

Sign In

JQuery portion of script no working

Recommended Posts

webguync

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information