JavaScript Yes/No Confirmation box

How to create a dialog with “Ok” and “Cancel” options

I am going to make a button to take an action and save the data into a database. Once the user clicks on the button, I want a JavaScript alert to offer “yes” and “cancel” options. If the user selects “yes”, the data will be inserted into the database, otherwise no action will be taken. How do I display such a dialog?

17 Answers 17

You’re probably looking for confirm() , which displays a prompt and returns true or false based on what the user decided:

if (confirm('Are you sure you want to save this thing into the database?')) < // Save it! console.log('Thing was saved to the database.'); >else < // Do nothing! console.log('Thing was not saved to the database.'); >

@Owen No. The spec says that you just get to provide a message. You can emulate a dialog in HTML (though it won’t block like the built-in one). jQuery Dialog is a good example of implementing this kind of thing.

note: you can put a return inside the else and then you don’t need to wrap all of your code in the confirm! (case by case fix though)

var answer = window.confirm("Save data?"); if (answer) < //some code >else < //some code >

Use window.confirm instead of alert. This is the easiest way to achieve that functionality.

How to do this using ‘inline’ JavaScript:

It’s better to handle onsubmit event of the form: with your code, if user presses enter in text, the form gets submitted without any request!

@p91paul — Which browser does this fail for you? I just tried pressing enter in IE, Chrome, and Safari on Windows and it worked as expected. jsfiddle.net/ALjge/1

No problem 🙂 There is usually more than one way to skin a cat. I just wanted to confirm my approach was working. Using the

as you suggested works too 🙂

Avoid inline JavaScript — changing the behaviour would mean editing every instance of the code, and it isn’t pretty!

A much cleaner way is to use a data attribute on the element, such as data-confirm=»Your message here» . My code below supports the following actions, including dynamically-generated elements:

$(document).on('click', ':not(form)[data-confirm]', function(e) < if(!confirm($(this).data('confirm')))< e.stopImmediatePropagation(); e.preventDefault(); >>); $(document).on('submit', 'form[data-confirm]', function(e) < if(!confirm($(this).data('confirm')))< e.stopImmediatePropagation(); e.preventDefault(); >>); $(document).on('input', 'select', function(e) < var msg = $(this).children('option:selected').data('confirm'); if(msg != undefined && !confirm(msg))< $(this)[0].selectedIndex = 0; >>); 

 Anchor Button  
Submit 
  Select an option: Here  

Very clean solution I haven’t thought of before. Can be even more concise though: $(«[data-confirm]»).on(‘click,submit’, function() < /* . */ >)

Sorry, couldn’t resist to have a look at it again. First: the events should be separated by a space. Second: you can still tighten the code jsfiddle.net/jguEg 😉

@GrimaceofDespair I have updated the code, because clicking and confirming a type=»button» then asked if the user wanted to submit the form (because you are clicking a form element), which obviously didn’t happen after clicking OK again.

These are good examples, though they all use the confirm() dialog so you can’t rename the Cancel/OK buttons 😐

@rogerdpack Yes, but the beauty of using data attributes is you can change confirm() to whatever you want without changing the HTML.

You have to create a custom confirmBox. It is not possible to change the buttons in the dialog displayed by the confirm function.

jQuery confirmBox

function doConfirm(msg, yesFn, noFn) < var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function() < confirmBox.hide(); >); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); > doConfirm("Are you sure?", function yes() < alert('Yes'); >, function no() < alert('No'); >);

Pure JavaScript confirmBox

 function doSomething()< document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line document.getElementById('id_truebtn').onclick = function()< // Do your delete operation alert('true'); >; document.getElementById('id_falsebtn').onclick = function()< alert('false'); return false; >; >

body < font-family: sans-serif; >#id_confrmdiv < display: none; background-color: #eee; border-radius: 5px; border: 1px solid #aaa; position: fixed; width: 300px; left: 50%; margin-left: -150px; padding: 6px 8px 8px; box-sizing: border-box; text-align: center; >#id_confrmdiv button < background-color: #ccc; display: inline-block; border-radius: 3px; border: 1px solid #aaa; padding: 2px; text-align: center; width: 80px; cursor: pointer; >#id_confrmdiv .button:hover < background-color: #ddd; >#confirmBox .message

confirmation Yes No 
 submit

Guys, you got pretty good examples, this is a POC. If you don’t like it , adapt to your needs and do not blame author. Note: jquery confirmBox example link is not working anymore. By the way, Pure JS is great example.

Thank you! I was afraid I’d have to include jQuery in my simple CRUD app just to do a simple are-you-sure-you-want-to-delete this.

This plugin can help you jquery-confirm easy to use

This a full responsive solution using vanilla javascript :

// Call function when show dialog btn is clicked document.getElementById("btn-show-dialog").onclick = function(); var overlayme = document.getElementById("dialog-container"); function show_dialog() < /* A function to show the dialog window */ overlayme.style.display = "block"; >// If confirm btn is clicked , the function confim() is executed document.getElementById("confirm").onclick = function(); function confirm() < /* code executed if confirm is clicked */ overlayme.style.display = "none"; >// If cancel btn is clicked , the function cancel() is executed document.getElementById("cancel").onclick = function(); function cancel() < /* code executed if cancel is clicked */ overlayme.style.display = "none"; >

.popup < width: 80%; padding: 15px; left: 0; margin-left: 5%; border: 1px solid rgb(1,82,73); border-radius: 10px; color: rgb(1,82,73); background: white; position: absolute; top: 15%; box-shadow: 5px 5px 5px #000; z-index: 10001; font-weight: 700; text-align: center; >.overlay < position: fixed; width: 100%; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.85); z-index: 10000; display :none; >@media (min-width: 768px) < .popup < width: 66.66666666%; margin-left: 16.666666%; >> @media (min-width: 992px) < .popup < width: 80%; margin-left: 25%; >> @media (min-width: 1200px) < .popup < width: 33.33333%; margin-left: 33.33333%; >> .dialog-btn < background-color:#44B78B; color: white; font-weight: 700; border: 1px solid #44B78B; border-radius: 10px; height: 30px; width: 30%; >.dialog-btn:hover

 
Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.
 
Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.
 
 Ok 
 
This will be saved. Continue ?
 
Cancel Ok 
 
 

You can intercept the onSubmit event using JavaScript.

Then call a confirmation alert and then grab the result.

$("input[name='savedata']").click(function(e) < var r = confirm("Are you sure you want to save now?"); //cancel clicked : stop button default action if (r === false) < return false; >//action continues, saves in database, no need for more code >); 

xdialog provides a simple API xdialog.confirm(). Code snippet is following. More demos can be found here

document.getElementById('test').addEventListener('click', test); function test() < xdialog.confirm('Are you sure?', function() < // do work here if ok/yes selected. console.info('Done!'); >, < style: 'width:420px;font-size:0.8rem;', buttons: < ok: 'yes text', cancel: 'no text' >, oncancel: function() < console.warn('Cancelled!'); >>); >

You gotta describe what you mean by // do work here.. . Do the functions for YES TEXT and NO TEXT go there?

You can add an oncancel option to the last parameter options of xdialog.confirm(text, onyes, options) . For more details see: xdialog default-options

Made super simple, tiny vanilla js confirm dialog with Yes and No buttons.
It’s a pity we can’t customize the native one.

Another solution apart from the others is to use the new dialog element. You need to make use of show or showModal methods based on interactivity with other elements. close method can be used for closing the open dialog box.

const dialogEl = document.querySelector("dialog"); const openDialog = document.querySelector("button.open-dialog"); const yesBtn = document.querySelector(".yes"); const noBtn = document.querySelector(".no"); const result = document.querySelector(".result"); openDialog.addEventListener("click", () => < dialogEl.showModal(); >); yesBtn.addEventListener("click", () => < // Below line can be replaced by your DB query result.textContent = "This could have been your DB query"; dialogEl.close(); >); noBtn.addEventListener("click", () => < result.textContent = ""; dialogEl.close(); >);

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); body < font-family: "Roboto"; >button < background: hsl(206deg 64% 51%); color: white; padding: 0.5em 1em; border: 0 none; cursor: pointer; >dialog < border: 0 none; >.result

Right now the compatibility is great with all the modern browsers.

I’m currently working on a web workflow which already has it’s own notifications/dialog boxes, and I recently (like, today) created a tiny, custom (and tailored to the project needs) YES/NO dialog box.

All dialog boxes appeard over a modal layer. Full user attention is required.

I define the options configurations in this way. This options are used to define the buttons text, and the values associated to each button when there clicked:

The use of the function goes something like this:

const answer = await notifier.showDialog('choose an option', options.config); if (answer) < // 'Yes' was clicked >else < // 'No' was clicked! >

What I do, it’s simply creating a async event handler for each option, it means, there is a simple handler assigned to each button. Each handler returns the value of the option. The handlers are pushed inside an array. The array is then passed to Promise.race , and that is the return value of the showDialog method, which will correspond to the value ‘s actual value (the one returned by the handler).

Can’t provide too much code. As I said it’s a very specific case, but the idea may be usefull for other implementations. Twenty lines of code or so.

A vanilla JavaScript option with a class for creating the custom modal dialog which includes a text box:

   .modal_dialog   Show Dialog 
Some content 
  

/** Encapsulates a custom modal dialog in pure JS */ class CustomModalDialog < /** * Constructs the modal content * @param htmlContent - content of the HTML dialog to show * @param okayControlElementId - elementId of the okay button, image or control * @param cancelControlElementId - elementId of the cancel button, image or control * @param insertionElementId - elementId of the or whatever tag to * insert the html at within the document * @param callbackOnOkay - method to invoke when the okay button or control is clicked. * @param callbackOnCancel - method to invoke when the cancel button or control is clicked. * @param callbackTag (optional) - to allow object to be passed to the callbackOnOkay * or callbackOnCancel methods when they're invoked. */ constructor(htmlContent, okayControlElementId, cancelControlElementId, insertionElementId, callbackOnOkay, callbackOnCancel, callbackTag) < this.htmlContent = htmlContent; this.okayControlElementId = okayControlElementId; this.cancelControlElementId = cancelControlElementId; this.insertionElementId = insertionElementId; this.callbackOnOkay = callbackOnOkay; this.callbackOnCancel = callbackOnCancel; this.callbackTag = callbackTag; >/** shows the custom modal dialog */ show() < // must insert the HTML into the page before searching for ok/cancel buttons var insertPoint = document.getElementById(this.insertionElementId); insertPoint.innerHTML = this.htmlContent; var okayControl = document.getElementById(this.okayControlElementId); var cancelControl = document.getElementById(this.cancelControlElementId); okayControl.addEventListener('click', event =>< this.callbackOnOkay(event, insertPoint, this.callbackTag); >); cancelControl.addEventListener('click', event => < this.callbackOnCancel(event, insertPoint, this.callbackTag); >); > // end: method /** hide the custom modal dialog */ hide() < var insertPoint = document.getElementById(this.insertionElementId); var okayControl = document.getElementById(this.okayControlElementId); var cancelControl = document.getElementById(this.cancelControlElementId); insertPoint.innerHTML = ""; okayControl.removeEventListener('click', this.callbackOnOkay, false ); cancelControl.removeEventListener('click', this.callbackOnCancel, false ); >// end: method /** sets the focus to given element id */ setFocus(elementId) < var focusElement = document.getElementById(elementId); focusElement.focus(); if (typeof focusElementstr === "HTMLInputElement") focusElement.select(); >> // end: class 

Источник

Create Confirmation Alert Box with YES and NO options — JavaScript

In this article, we will see how to create a confirmation box with Yes Or No using JavaScript.

In JavaScript, we can use the confirm() method of the window object to display a dialog / alert box.

The confirm() method is used to display a dialog box with custom text/ message that we can pass as an argument with the method.

confirm("Your custom message") 

The dialog box also provides us with the OK and Cancel buttons. And if the user clicks OK, it will return true , else it will return false if the user clicks Cancel.

Confirmation Box with Ok and Cancel button

Let’s see with an example of how to create a confirmation box using JavaScript:

body> p> click the button to open dialog Box p> button onclick="openDialog()">Click Here button> script src="main.js"> script> body> 

function openDialog( ) < let customMsg = "Do you want Tea?"; if (confirm(customMsg)) < console.log("User clicked OK"); > else < console.log("User Clicked CANCEL"); > > 

In the code, we have to use the if. else statement to display some message on our console, depending on the boolean results.

Yes/No instead of Ok/Cancel for Confirm in JavaScript

One of the drawbacks with confirm() method is that the dialog box is not a part of the website UI. So we cannot change the OK and Cancel buttons on the confirmation dialog box.

So we have to code our HTML confirmation box with Yes and No buttons and create our own function which will check if a user has clicked the yes button or the No button.

div> button onclick="showConfirmBox()">Show Dialog button> div id="confirm-box" hidden> h3>Confirmation h3> p>Do you really want to reset the database? p> button onclick="confirm('yes')">Yes button> button onclick="confirm('no')">No button> div> div> 

Script code:

function showConfirmBox( ) < document.getElementById("confirm-box").hidden = false; > function confirm(data) < if (data === "yes") < console.log(" user clicked yes"); > else < console.log("user clicked No"); > > 

In the Html code, we have kept the div with id «confirm-box» hidden at first. And when we click the button Show Box, its hidden property is set to true and the confirmation box is displayed on the screen.

The box has a Yes and No button with a click event. When any button is clicked, the confirm() function checks if the user has clicked yes or no, depending on the argument that is passed.

Related Topics:

Источник

How to Create a Yes/No Confirmation Box in JavaScript

Sometimes, you just want an easy way to get a yes or no response from the user in the browser.

In this post, we’ll be learning how to create a yes/no confirmation box in JavaScript to get that response from the user.

confirm()

The best way to create a yes/no confirmation box is to use the JavaScript confirm() function. This function will make the browser render a dialog box with a message and two buttons, an Ok and a Cancel button.

When the user interacts with this dialog box, it will return to you a boolean, true if the user clicked the Ok button and false if the user clicked the Cancel button.

Here’s how to create a confirmation box using confirm() :

Remember, this will only work in the browser because it is only available on the window object.

Here’s how the code above would look in the browser: Confirmation box in the browser

This is how a full HTML page using this code would look like:

       Perform action   

As a recap, after you get the response from the user, you can do something with it:

With that, you’ve created a yes/no confirmation box in JavaScript.

Conclusion

In this post, we’ve seen how to create a yes/no confirmation box in JavaScript to get that response from the user.

From there, you can do whatever you need to do with that response.

Hopefully, this helped you out. Happy coding!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник