JavaScript

Define Do Nothing to Keep User on the Same Page in JavaScript

Sometimes, the user unintentionally presses the cross button, so the user gets an alert message asking them whether they want to stay here or close the tab with the “OK” and “Cancel” options. If the user clicks the “OK” button, the tab closes, if they click “Cancel”, perform nothing, and keep them on the same page. How do developers do this?

This article will demonstrate the methods to do nothing and stay on the same page using JavaScript.

Define Do Nothing to Keep User on the Same Page

Use the following approaches for keeping the user on the same page:

Method 1: Do Nothing to Keep the User on the Same Page Using window.close() Method

Use the JavaScript predefined method of the window object called “window.close()”. It closes the current window.

Syntax

For “window.close()” method uses the below-provided syntax:

window.close();

Example

First, create an HTML page that contains a heading and a button that will act as a cross (x) tab button. Attach an “onclick” property with the button that will call the JavaScript function named “stayonPage()”:

<h3>Keep User on the Same Page</h3>

<label>Click cancel to stay on the same page</label> <br><br>

<button onclick="stayonPage()">Click here</button>

By executing the above code, the output will be like this:

Then, in the JavaScript file using the below lines of code:

function stayonPage() {

if (confirm("Do you want to close the page?")){

window.close();

  }

}

In the above code snippet:

  • Define a function “stayonPage()”.
  • Check the condition by calling the JavaScript “confirm()” method that will show a message with the “OK” and “Cancel” option buttons.
  • Call the “window.close()” method in the body of the conditional statement. If the user click on the “OK” button, it closes the tab, if they click on the “Cancel” button, it will do nothing and keep them on the same page.

Output

The above output shows that while clicking on the “Cancel” button, nothing happened.

Method 2: Do Nothing to Keep the User on the Same Page Using void(0) Method

The “void(0)” is an operator in JavaScript that returns undefined and it will do nothing. This prevents the current window from refreshing and loading a new page.

Syntax

The following syntax is utilized for keeping the user on the same page with the help of void(0):

void(0);

Example

The below-given lines of code are used in JavaScript file, for keeping the user on the same webpage:

function stayonPage() {

if (confirm("Do you want to close the page?")){

void(0);

  }

}

In the above snippet:

  • First, define a function “stayonPage()”.
  • Check the condition by calling the JavaScript “confirm()” method that will display a message with the “OK” and “Cancel” option buttons.
  • Call the “void(0)” in the body of the conditional statement. It returns undefined and nothing will happen.

Output

Conclusion

For defining do nothing to keep users on the same webpage, use the JavaScript predefined method of the Window object called “window.close()” and the JavaScript “void(0)” operator. It returns undefined and it stops refreshing the current web page or loads a new page. This article demonstrates the methods to do nothing and stay on the same page using JavaScript.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.