How not to refresh a page from JavaScript?

Question

I am working on a website using asp.Net, and it includes a page called from an iframe. This page named Districting, has a javascript code in the aspx page. I created a function, that is executed when "Done" button is clicked. This function tests if the conditions that the user made are true. If yes, another page is loaded, if no, an alert appears, and nothing happens. But actually, something is happening: the page is refreshing which is not what I want. This is the button:

<button id="Button1" onclick="testing()">Done</button>

This is the function testing:

function testing() {
    if (conditions are true)
        //Go to another page
    else{
        alert("Wrong decision");
        //Stay in the current page without refreshing it
    }
 }

So all I need is to prevent the page from refreshing when clicking on "Done" button.

Thanks in advance:)

Answer 1

Change your code to

function testing() {
    if (conditions are true)
        return true;
    else{
        alert("Wrong decision");
        return false;
    }
 }

and your tag to

<button id="Button1" onclick="return testing()">Done</button>    

Also, see How to confirm navigation for a link in a href tag?, as it's very similar.

Answer 2

A button is standard an submit button, so is the button in an form?

If that's true, you can takkle that problem when you define the type of the button:

<button type="button" id="Button1" onclick="testing()">Done</button>

Answer 3

Your javascript function that's firing onclick needs to return false. The following should work:

<button id="Button1" onclick="testing(); return false;">Done</button>