Ajax request goes to new page instead of updating current page? - php

Question

It was working before and I do not remember changing anything. I have a form and it sends the info to a "processing" php file and should get a response back. Instead, it just goes to the "processing" php and echoes the JSON data on a new page. Jquery is including from google and the form page and "process" page are both in the same directory.
$data = array(
'status' => $status,
'message' => $errorMsg
);
echo json_encode($data);
if ($status == "success"){
session_destroy();
}
exit();
So that is what it does at the end of all the processing (making sure data is good and all that which works just fine). This is the javascript used:
$(document).ready(function(){
$('#signupForm').submit(function(){
//various client side checks to keep form from submitting easy to see garbage
if($(this).data('formstatus') !== 'submitting'){
var responseMsg = $('#response');
responseMsg.hide()
.addClass('response-waiting')
.text('Signing Up...')
.fadeIn(200);
var dataString = //the data
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function(data) {
var responseData = jQuery.parseJSON(data),
messageClass = '';
switch(responseData.status){
case 'error':
messageClass = 'response-error';
break;
case 'success':
messageClass = 'response-success';
break;
}
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(messageClass)
.text(responseData.message)
.fadeIn(200,function(){
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(messageClass);
});
},5000);
});
});
}
});
}
return false;
});
})
If there is something specific I should look for please let me know and I will update. qand like I said, I had it working (yesterday) and I do not remember changing anything except taking out a client side check at the top which I know should not matter at all.

Answer 1

A few things might help is solving this.
The first is that it's recommended not to use return false to stop usual on click events from happening.
It's best practice to at the top of the function do
preventDefault();
see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
This should stop the form from submitting and therefore loading the post page instead of doing the ajax call.
The second issue is that you have a return false call which is obviously not being hit. The above fix will stop the form from submitting no matter what but I'd guess that you have a javascript error in the code between the start and the return false. This will throw an exception and therefore return false will never be called. Once the above fix is put in and it stops redirecting, check your console in your browser for the exception.
Cheers

Answer 2

I assume your form action is heading process.php and you are not returning false on submit.
It should be like this
<form name='myForm' action='nonjspage.php' method='post' onsubmit='return false;'></form>
If the error still continues, then its not your form but an error in the javascript. Depending on what browser you are using there is an error console.
In firefox you head to the menu -> web developer -> web console.
Once you have opened this, reload the page and press the submit button again, it should give you information about your javascript error.