Jump to content

JQuery portion of script no working


webguync

Recommended Posts

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 protected]>';	
//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.

Link to comment
https://forums.phpfreaks.com/topic/228143-jquery-portion-of-script-no-working/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.