Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change button label in confirm box using JavaScript?
In this tutorial, we will learn to change the button label in the confirm box using JavaScript. The confirm box is useful for taking the confirmation from the user. For example, when you try to delete something from your account on some websites, they show you a popup box containing a message like “Are you sure to delete ….?”. Also, it contains the yes and no buttons, which is one kind of confirmation the application takes from the users.
JavaScript users can create the confirm box using the .confirm() method, which contains the confirmation message string, ok, and cancel button. The programmer can’t change the confirm box style and button label if they use the default confirm box. So, we will create the custom confirm box in this tutorial.
Creating a Custom Confirm Box using JavaScript
Programmers can use only HTML, CSS, and JavaScript to create the custom confirm box. We can create a single div and add content to confirm box including the buttons of confirm box in that div. Also, we can style the div and its content according to our requirements. We can create the function to show and hide the confirm box when the user clicks on the button.
Syntax
We can follow the below syntax to create the custom confirm box with different button labels.
<div id = "confirm">
// add confirmation message here
// custom buttons
<div class="close">
<button onclick = "closeConfirm()"> Yes </button>
<button onclick = "closeConfirm()"> No </button>
</div>
</div>
<button onclick = 'showConfirm()''> Show confirm Box </button>
<script>
var confirmDiv = document.getElementById("confirm");
// function to show confirm box
function showConfirm() {
confirmDiv.style.display = "block";
}
// function to hide confirm box
function closeConfirm() {
confirmDiv.style.display = "none";
}
</script>
Example 1
In the example below, we have created the custom div, which contains the confirmation message and two buttons with the label “yes” and “no.” We have styled the confirm box and set the button at the bottom right corner of the div.
We have a button called show confirm box, and when the user clicks on that, we will invoke a function that will set the “display: block” for the confirm box. When users click on any button residing in the confirm box, it will invoke the function that will set the “display: none” to the confirm box to hide it.
However, programmers can add the different functionalities to the buttons of the confirm box rather than only closing the confirm box.
<html> <head> <style> #confirm { display: none; background-color: rgb(194, 195, 251); border: 1px solid green; position: fixed; height: 80px; width: 250px; left: 40%; top: 2%; padding: 6px 8px 8px; text-align: center; } p { font-size: 18px; color: red; } button { border-radius: 12px; height: 2rem; padding: 7px 10px; cursor: pointer; border: 2px solid green; background-color: aqua; margin: 5px; } .close { display: flex; position: absolute; right: 20px; bottom: 0px; } </style> </head> <body> <h2> Change the button label in confirm box in JavaScript. </h2> <h4> Creating custom confirm box using <i> vanilla JavaScript. </i> </h4> <div id="confirm"> <p> Are you sure to delete .....? </p> <div class = "close"> <button onclick = "closeConfirm()"> Yes </button> <button onclick = "closeConfirm()"> No </button> </div> </div> <button onclick='showConfirm()''> Show confirm Box </button> <script> var confirmDiv = document.getElementById("confirm"); function showConfirm() { confirmDiv.style.display = "block"; } function closeConfirm() { confirmDiv.style.display = "none"; } </script> </body> </html>
Example 2
Change Button Label Using jQuery and CSS
In the example below, we change the button label in confirm box. Try to run the following code. The code uses a JavaScript library jQuery and CSS to create a confirm box with different button label that the standard confirm box –
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function functionConfirm(msg, myYes, myNo) { var confirmBox = $("#confirm"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function() { confirmBox.hide(); }); confirmBox.find(".yes").click(myYes); confirmBox.find(".no").click(myNo); confirmBox.show(); } </script> <style> #confirm { display: none; background-color: #91FF00; border: 1px solid #aaa; position: fixed; width: 250px; left: 50%; margin-left: -100px; padding: 6px 8px 8px; box-sizing: border-box; text-align: center; } #confirm button { background-color: #48E5DA; display: inline-block; border-radius: 5px; border: 1px solid #aaa; padding: 5px; text-align: center; width: 100px; cursor: pointer; } #confirm .message { text-align: left; } </style> </head> <body> <div id="confirm"> <div class="message"></div> <button class="yes">Like!</button> <button class="no">No, I Like Cricket!</button> </div> <button onclick = 'functionConfirm("Do you like Football?", function yes() { alert("Yes") }, function no() { alert("no") });'>submit</button> </body> </html>
We have learned to change the label of the button of the confirm box by creating the custom confirm box. Also, we can use the custom libraries to style the confirm box. Now, we can set the button label in confirm box according to the confirmation message.
10K+ Views
