jQuery event.preventDefault() not working in Firefox (JSFiddle included)
JavascriptJqueryFirefoxGoogle ChromeJsfiddleJavascript Problem Overview
This is a kind of similar duplicate to some others here, but I think I'm using event.preventDefault()
correctly in this case.
Here's a JSFiddle you can see the code with: http://jsfiddle.net/SeEw2/2/
Basically, click the Submit button.
In Chrome: Nothing happens - correct response.
In Firefox: Page reloads, oh noes!
So why is the page reloading in Firefox and not Chrome? I've been Firebugging it and no errors come up in either...
Javascript Solutions
Solution 1 - Javascript
The variable event
in your code is not initialized.
extract :
$('#ajaxsearch').click(function(event) {
// Stop the Search input reloading the page by preventing its default action
event.preventDefault();
Solution 2 - Javascript
Ah I've had a similar problem in that past. Rather than event.preventDefault() try passing the event to:
function ie8SafePreventEvent(e){
if(e.preventDefault){ e.preventDefault()}
else{e.stop()};
e.returnValue = false;
e.stopPropagation();
}
I know it says IE, but I've never had a problem with it since =]
Solution 3 - Javascript
Instead of looking for a click event on the submit button, why not use the $(form).submit handler?
As long as you have 'return false' at the end of the handler, the page won't reload.
Solution 4 - Javascript
Because your not passing the event object like function(event)
, but my question is why even go through all this when you can make the type="button"
and onclick pass the values? In essence that what your doing with this whole process.
Solution 5 - Javascript
I solved it this way, due my code is a little bit different this may be helpful for other people. My initial code looked like this.
<form id="enrollstudentform" onsubmit="return enrollStudents()">
...
</form>
My js function looked like
function enrollStudents() {
// Stop Form.
event.preventDefault();
// Other code
}
I had to pass the parameter event in the function call and receive it in the function.
<form id="enrollstudentform" onsubmit="return enrollStudents(event)">
...
</form>
js code:
function enrollStudents(event) {
// Stop Form.
event.preventDefault();
// Other code
}
I hope it helps.