50

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

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
Jack
  • 9,615
  • 18
  • 72
  • 112
  • 16
    The reason this works on Chrome is that Chrome throws a bone to sites that are IE-dependent, by populating `window.event` with the current event before triggering handlers. (And a free reference like your `event` -- because you forgot to include it in your event handler signature, as [ClemDesm was the first to point out](http://stackoverflow.com/questions/4585970/jquery-event-preventdefault-not-working-in-firefox-jsfiddle-included/4586007#4586007) -- means you're falling back on `window.event`.) Firefox throws no such bones to IE-specific code. – T.J. Crowder Jan 03 '11 at 16:06
  • Very informative, thanks T.J. - I never knew that. – Jack Jan 03 '11 at 16:07
  • 2
    Please post code in the question, not in jsFiddle. – Tim Down Jan 03 '11 at 16:55

5 Answers5

99

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();
Shikiryu
  • 10,180
  • 8
  • 49
  • 75
  • Aha! Thank you ClemDesm, how silly to miss that. Now it seems to be showing straight up in Firebug's Error Console anyway... hmmm :) – Jack Jan 03 '11 at 16:06
  • 7
    I wonder why it works in chrome... had the same exact issue and this fixed it. – Landon Poch Sep 12 '12 at 16:18
  • @Shikiryu -- You saved me, me too was using function(e) and missing it, Thanks a lot ! – Ambuj Jun 02 '15 at 15:12
  • "How is this answer going to help me?" or so I thought. And then I looked at my code .... Btw, the latest version of FF (66.0.2) no longer had the issue and would ignore this just like Chrome, but 60.x.x still did. – cdonner May 15 '19 at 16:26
9

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 =]

Dartoxian
  • 750
  • 1
  • 6
  • 10
2

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.

CamelBlues
  • 3,444
  • 5
  • 29
  • 37
  • That's what I'm using now, seems like a better way to do it. Thanks! – Jack Jan 03 '11 at 16:17
  • I was also using this but with 'submit' and Firefox kept on posting the form. I had to change to 'click' and it works. – Ajowi Jul 05 '20 at 12:09
1

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.

Babiker
  • 18,300
  • 28
  • 78
  • 125
  • Hey, why did I not think of that?! Cheers! I'm now rolling with a `type="button"`. I'm not using `onclick` though, since in the larger scope of things it's more convenient to do it like this. – Jack Jan 03 '11 at 16:05
  • I may be wrong (and it doesn't have a relation with the question) but I'm wondering : Does a `type="button"` recognize the _enter_ keyboard touch as a submit? Can't really test it on jsfiddle, can't test it in another way @ my work and I'm curious :) – Shikiryu Jan 03 '11 at 16:11
  • When you press Enter with focus on the textbox, it doesn't. But pressing Enter with focus (probably Tabbed) onto the Button itself, yes, it does recognise it as a submit and `preventDefault()` occurs. Is that what you mean? :) – Jack Jan 03 '11 at 16:13
  • OK, to clarify - in order to get Enter to work with both text input and on the Submit button, I assigned the id `#ajaxsearch` to the `
    ` tag, then ran `$('#ajaxsearch').submit([...]` - that works with both of them.
     – Jack Jan 03 '11 at 16:17
  • @Jack : Yeah, so it's not really user-friendly IMHO. A _normal_ person won't focus on the button and then press _enter_ to submit a form. Then, I'll be curious to know if a button and a `.submit()` handler would do. It seems like a better solution in this case (no `action` in the `form` (BTW, why do you use a `form` then ;) ?) Anyway with JS disabled, no fallback here. – Shikiryu Jan 03 '11 at 16:19
0

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.

Andres Ramos
  • 330
  • 4
  • 13