jQuery event.preventDefault() not working in Firefox (JSFiddle included)

JavascriptJqueryFirefoxGoogle ChromeJsfiddle

Javascript 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.

http://jsfiddle.net/SeEw2/4/

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJackView Question on Stackoverflow
Solution 1 - JavascriptShikiryuView Answer on Stackoverflow
Solution 2 - JavascriptDartoxianView Answer on Stackoverflow
Solution 3 - JavascriptCamelBluesView Answer on Stackoverflow
Solution 4 - JavascriptBabikerView Answer on Stackoverflow
Solution 5 - JavascriptAndres RamosView Answer on Stackoverflow