Verifying JavaScript Confirmation when Clicking on Unchecked CheckBox

A situation has arisen where a checkbox is set to automatically post when it is changed.

The auto post functionality is functioning properly for both checked and unchecked states. However, the desire is to have a dialog box pop up to confirm before each event occurs.

Currently, the popup box does appear when the checkbox is checked.

Unfortunately, there is an issue with getting a confirmation dialog to pop up when the checkbox is unchecked.

Query: How can I implement a dialog box for the uncheck event using only client-side code?

<asp:CheckBox ID="CurrentCheckBox" runat="server" AutoPostBack="True" Checked='<%# Bind("BDValue") %>' OnCheckedChanged="SharedFunctionForThisCheckBox_CheckedChanged" onclick="checkBoxConfirmClick(this);" />


<script type="text/javascript">        
    function checkBoxConfirmClick(elementRef) {
        if (elementRef.checked) {
            if (window.confirm('Are you sure?') == false)
                elementRef.checked = false;
        }
    }
</script>
javascriptasp.net

Answer №1

When your current approach is effective, you can simplify it by:

function handleCheckBoxConfirmation(elementRef) {
    if (!window.confirm('Are you sure?')) { // If not certain
        elementRef.checked = !elementRef.checked; // Toggle back
    }
}

Alternatively, it is advisable to pass the event as e into the handler and modify the function like so:

function handleCheckBoxConfirmation(e) {
    if (!window.confirm('Are you sure?')) { // If uncertain
        e.preventDefault(); // Cancel the click action
    }
}

If there are other attached handlers that need to be skipped, consider using e.stopPropagation().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JavaScript code in the HTML files is not functioning as expected

Upon form submission in my program, the form action directs to xyz.php. Within xyz.php, I simply use INCLUDE("abc.html") to redirect to another HTML page. The abc.html page contains HTML tags and JavaScript code, but after the form submission, the page red ...

javascriptphphtml

Executing JavaScript code using an HTML form submission

Greetings, I have implemented an HTML form on my website for user login using AJAX (jQuery), but I am encountering some issues. Below is the JavaScript code: function validateLoginDetails() { $('[name=loginUser]').click(function() { ...

javascriptjqueryformsfunctionsubmit

Adding the expanded search icon to a text box in Vuetify: A step-by-step guide

Recently, I integrated Vuetifyjs into my right-to-left (RTL) Vue 2 project. Within a card element, I inserted a table and included a search bar following the documentation. Now, I have two specific goals in mind: Relocate the "number of items to show" opt ...

javascriptvue.jsvuetify.js

Why does my Angular service throw an error stating "undefined is not a function" when passing my function as an argument?

I am currently working on implementing factory and two constructor patterns in Angular. My goal is to convert the factory into an Angular service. Below is a simplified version of the code I am working with: function processFactory () { // some code ...

javascriptangularjs

What is the best way to adjust the size of an image within a div element using HTML?

I've created a Carousel with 5 images to display. However, I'm having an issue where only the image is showing up, and I want the text and button to appear below it. Here's how the nature image is currently displaying: What I want is for th ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the process for combining AngularJS filters?

I currently have a fragment object like this: [{id: 721, titulo: "Cotizador Gastos Médicos Bx+ 2019", descripcion: "Cotizador Gastos Médicos Bx+ Tarifas 2019", updateDate: "2020-03-25 14:30:22.0", idCategoria: "1", …}, {id: 88, titulo: "Cotizador GMM ...

javascripthtmlangularjs

Sequelize associations are not functioning optimally as expected

Trying to display a nested relationship: Cat.hasMany(legs) Leg.belongsTo(cat) Leg.hasOne(paw) paw.hasMany(leg) This is the Cat Model: module.exports = (sequelize, DataTypes) => { const Cat = sequelize.define('Cat', { us ...

javascriptpostgresqlsequelize.js

Reduce XSLTProcessor output by 50%

I have a persistent problem (from my perspective, at least). Every time I use XSLTProcessor.transformToFragment, the output is consistently halved compared to the input. For example, when I receive 200 entries in an XML file as a response from a webservi ...

javascriptjqueryxmlxslt

Import data into Bootstrap table from an external source

I am having trouble styling the table loaded from the table.html file onto the index page. Even after loading the table, the styles from bootstrap classes are not applied. What could be causing this issue? Importing bootstrap libraries directly into the ta ...

javascripthtmljquerybootstrap-5bootstrap-table

What is the best method for linking an HTML file to CSS, javascript, and image files?

I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...

javascripthtmlioszipnsurl

Tips for extracting unique values from two arrays and returning them in a new array using JavaScript

Hello, I need assistance with combining two arrays. Array a contains [1,2,3] and array b contains [2,5]. I would like the result array to only include elements that are unique between the two arrays, such as [5]. Can you please provide guidance on how to ...

javascript

Toggle visibility (individually duplicating) one thousand sentences while maintaining optimal browser and host performance

I have created JQuery scripts to toggle the display of future sentences on my page (approximately 1000 duplicates) and I am seeking the most efficient method (for browser/host) to accomplish this task. Here are two functional solutions that I have already ...

javascriptjqueryperformanceduplicatesclone

Looking for a way to upload only part of a large file using HTML and PHP

Is it possible to create a PHP script that can upload only the first 1 MB of a very large file? Can this be achieved with a standard form upload in PHP by closing off the connection after 1 MB is uploaded? I have researched various uploaders (HTML5/Java ...

phpjavascripthtml

Automatically adjusting the locale settings upon importing the data

Is there a way to create a dropdown menu of languages where clicking on one language will change the date format on the page to match that country's format? In my React app, I am using moment.js to achieve this. My plan is to call moment.locale( lang ...

javascriptreactjsmomentjslocaletranslation

Steps for creating checkboxes for individual table rows in HTML using embedded PHP and updating their values in a PostgreSQL database:1. Begin by iterating through each

I have already retrieved the data from the database. It is displayed on the HTML table, but it is currently in non-editable mode. I need to ensure that the data shown is accurate and update its Boolean value in the database. Otherwise, incorrect records sh ...

javascriptphphtmlcodeignitermodel-view-controller

Having issues with the sidebar malfunctioning and unsure of the cause

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...

javascriptjqueryhtmlcss

Prevent multiple instances of Home screen app on iOS with PWA

There seems to be an issue with the PWA app not functioning properly on iOS devices. Unlike Android, where adding an app to your homescreen will prompt a message saying it's already installed, iOS allows users to add the app multiple times which is no ...

javascriptangularjsasp.net-mvcpolymer-1.0progressive-web-apps

Warning of superfluous escape character when executing 'npm start' on a React application

I have encountered a warning while running my React app using npm start. The warning appears in the terminal and reads as follows: Line 24: Unnecessary escape character: \[no-useless-escape The warning is related to the following code snippet: va ...

javascriptnode.jsreactjsnpmecmascript-6

Tips on adding custom fonts for text geometry in three.js

Currently, I am delving into the realm of three.js to create text geometry, although my expertise in JavaScript is fairly limited. Initially, I attempted to utilize my custom JSON font, which resulted in the same error encountered when using fonts from th ...

javascriptvue.jsthree.jsvuejs2

What is the best way to detect if there are any active jQuery components on a website using WebDriver?

Currently, I am in the process of automating a web page that contains various JavaScript and jQuery functionalities using Selenium WebDriver. It has come to my attention that some posts mention the importance of waiting for the page to load completely befo ...

javascriptjavaselenium-webdriverwebdriver