Show a confirmation popup in javascript​

problem

You’re creating a dynamic web page that asks the user for a confirmation. For example let’s imagine a user interface with a table of items that you can edit or delete each one. Before deleting an item, you wish to double check with the user if they’re sure to proceed with taking this action. By using JavaScript, we can accomplish this piece of logic.

solution

JavaScript comes out of the box with a function for showing a confirmation popup. It is the confirm() function as shown below in an example.

				
					function confirm_popup()
{
     let response = confirm("Do you accept?"); 
     if (response == true)
     {
        console.log("ok");
     }else {
        console.log("no");
    }
}
				
			

The confirm function returns a Boolean value that is either True or False. If it’s True the code above print in the console of JS the message “ok” or “no” respectively.

In order to execute the piece of JavaScript above, let’s put it in an HTML file that will have a button and call that function when it’s clicked. The code is shown below:

				
					<html>
   <head>
      <script type="text/javascript">
         function confirm_popup()
         {
            let response = confirm("Do you accept?"); 
            if (response == true)
            {
               console.log("ok");
            }else {
               console.log("no");
            }
         }
   </script>   
   </head>
   <body>
      <input type="button" value="confirm" onclick="confirm_popup()"/>
   </body>
</html>


				
			

output

Open the page in a web browser and click on the confirm button. It should show the popup like below:

Now, open the web developer tools of your browser and navigate to the console. Depending on the user response from the popup, it should show the message ok or no

JavaScript clicking on the onfirm popup outputs in console

conclusion

Simply in JavaScript we can use the confirm function to show a default pop up for confirmation. There are better ways for showing more user friendly popups but this is one of the simplest. You can see it live by clicking below:

see it live

Share it!

Facebook
Twitter
LinkedIn
Reddit
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

Google Analytics Cookies

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

HotJar Cookies

We use Hotjar in order to better understand our users’ needs and to optimize this service and experience. Hotjar is a technology service that helps us better understand our users’ experience (e.g. how much time they spend on which pages, which links they choose to click, what users do and don’t like, etc.) and this enables us to build and maintain our service with user feedback. Hotjar uses cookies and other technologies to collect data on our users’ behavior and their devices. This includes a device's IP address (processed during your session and stored in a de-identified form), device screen size, device type (unique device identifiers), browser information, geographic location (country only), and the preferred language used to display our website. Hotjar stores this information on our behalf in a pseudonymized user profile. Hotjar is contractually forbidden to sell any of the data collected on our behalf.

For further details, please see the ‘about Hotjar’ section of Hotjar’s support site.