CODEWITHSUNDEEP
javascriptjqueryonclick
Kaushik Donkena
Kaushik Donkena

Reputation: 1

button onclick function is unnecessarily reloading the page after the function execution

Here is a button onclick which calls a function. When this button is clicked after the function execution, the page is getting reloaded in firefox browser. 

<button id="next" class="submit" type="submit" onclick="onNextEvent()" return false;>Next</button>

When 

event.stopImmediatePropagation();
event.preventDefault();

are removed from this function, the page is getting reloaded in Chrome browser.I am using Jquery jquery - 1.9.1.js.Please help!Thanks

function onNextEvent() {
    event.stopImmediatePropagation();
    event.preventDefault();
    if ($('.current').hasClass('first')) {
        $('.current').removeClass('current').hide()
            .next().show().addClass('current');
        $('#prev').show();
        $('#prev').attr('disabled', null);
        $('#skip').show();
        return;
    }
}

Upvotes: 0

Views: 914

Answers (2)

Kenny806
Kenny806

Reputation: 595

The return false statement should be implemented together with the onclick like this:

<button onclick="onNextEvent(); return false;">

Or, the function called can return false:

 function onNextEvent() {
    //function code
    return false;
 }

I have used the first way several times and it always worked for me.

Upvotes: 0

Black Sheep
Black Sheep

Reputation: 6694

Try this: 

function onNextEvent(event) 
{   
   event.preventDefault();

/* Rest of code */

Or 

function onNextEvent(event) 
{   
   event.stopImmediatePropagation();

/* Rest of code */

Upvotes: 1

Related Questions