In JavaScript, the radio input will be deselected when the user decides to cancel after clicking by using `onclick="return confirm('msg');"`

Question

In JavaScript, the radio input will be deselected when the user decides to cancel after clicking by using `onclick="return confirm('msg');"`

UPDATE:

It seems like this problem only occurs in Internet Explorer. Here is a sample code demonstrating the issue:

<html>
    <body>
        <SPAN id=selectOperacion class=x2j>
            <INPUT onclick="return confirm('testing');" type=radio name=selectOperacion id=selectOperacion:_0>
            <LABEL title=Loan for=selectOperacion:_0>Loan</LABEL>

            <INPUT onclick="return confirm('testing');" type=radio name=selectOperacion id=selectOperacion:_1>
            <LABEL title="Material Transfer" for=selectOperacion:_1>Material Transfer</LABEL></SPAN>
    </body>
</html>

Original post:

I have defined two radio buttons using Apache Trinidad as follows:

<tr:selectOneRadio id="selectOperacion" 
    value="#{myBean.operacion}" 
    autoSubmit="true" 
    valueChangeListener="#{myBean.myChangeListener}"
    onclick="return confirm('test');" >
        <f:selectItems value="#{myBean.options}" />
</tr:selectOneRadio>

This code generates two radio input elements.

The problem arises when the user clicks "Cancel" on the confirm dialog, causing both radio buttons to become unselected.

Is there a way to maintain the selected state of the radio button even if confirm() returns false?

Thank you in advance.

javascript internet-explorer

Answer 1

Answer №1

It appears to be a bug specific to Internet Explorer.

To resolve the issue, I implemented a solution by storing the previous state of the radio buttons in variables during the onmousedown event. Subsequently, in the onclick event, a function is invoked to display a confirmation dialog. If the user chooses to cancel, the state of the radio buttons is restored.

onmousedown="update_state();"
onclick="return updateRadios(this);"

<script type="text/javascript"> 
//<![CDATA[
    var prev_radio0_state;
    var prev_radio1_state;

    // param represents the radiobutton that was clicked
    function updateRadios(param) { 
        var radio0 = document.getElementById("selectOperacion:_0");
        var radio1 = document.getElementById("selectOperacion:_1");

        if (radio0 == null || radio1 == null) {
            // no action required if only one radio button exists
            return false;
        }

        if ((param === radio0 && prev_radio0_state === true) || (param === radio1 && prev_radio1_state === true)) {
            // do nothing if a previously selected button is clicked again
            return false;
        }

        // both radio buttons exist and the unselected one was clicked

        var ok = confirm('Are you sure?');

        if (ok) {
            return true;
        }

        radio0.checked = prev_radio0_state;
        radio1.checked = prev_radio1_state;

        return false;
    }

    // Saves the checked state of the radio buttons before changing it in the click event.
    // Called in the onmousedown event
    function update_state() {
        var radio0 = document.getElementById("selectOperacion:_0");
        var radio1 = document.getElementById("selectOperacion:_1");

        prev_radio0_state = radio0 !== null ? radio0.checked : null;
        prev_radio1_state = radio1 !== null ? radio1.checked : null;
    }
//]]>
</script>

Answer 2

It appears to be a bug specific to Internet Explorer.

To resolve the issue, I implemented a solution by storing the previous state of the radio buttons in variables during the onmousedown event. Subsequently, in the onclick event, a function is invoked to display a confirmation dialog. If the user chooses to cancel, the state of the radio buttons is restored.

onmousedown="update_state();"
onclick="return updateRadios(this);"

<script type="text/javascript"> 
//<![CDATA[
    var prev_radio0_state;
    var prev_radio1_state;

    // param represents the radiobutton that was clicked
    function updateRadios(param) { 
        var radio0 = document.getElementById("selectOperacion:_0");
        var radio1 = document.getElementById("selectOperacion:_1");

        if (radio0 == null || radio1 == null) {
            // no action required if only one radio button exists
            return false;
        }

        if ((param === radio0 && prev_radio0_state === true) || (param === radio1 && prev_radio1_state === true)) {
            // do nothing if a previously selected button is clicked again
            return false;
        }

        // both radio buttons exist and the unselected one was clicked

        var ok = confirm('Are you sure?');

        if (ok) {
            return true;
        }

        radio0.checked = prev_radio0_state;
        radio1.checked = prev_radio1_state;

        return false;
    }

    // Saves the checked state of the radio buttons before changing it in the click event.
    // Called in the onmousedown event
    function update_state() {
        var radio0 = document.getElementById("selectOperacion:_0");
        var radio1 = document.getElementById("selectOperacion:_1");

        prev_radio0_state = radio0 !== null ? radio0.checked : null;
        prev_radio1_state = radio1 !== null ? radio1.checked : null;
    }
//]]>
</script>

In JavaScript, the radio input will be deselected when the user decides to cancel after clicking by using `onclick="return confirm('msg');"`

Answer №1

Similar questions

Nested routes are arranged in the depths and a variety of components appear depending on the path of the

Issues with Drupal's $get function have been preventing the retrieval of complete

The instance is referring to "close" as a property or method during render, but it is not defined. Ensure that this property is reactive and properly defined

Nested ng-repeat using td to display multiple items in AngularJS

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

How to set and update the value of a TextField in ReactJS using useState and implement an onchange event handler for the input field in TypeScript

Using jQuery Ajax and PHP for Secure User Authentication

"Effortlessly Engage Users with Rails and AJAX Comment Posting

How do I use jQuery to remove a dynamically added class from the page's header?

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Tips for accessing the content of a div tag with Protractor

How to upload an image using Java and store it on a server without the use of Html5

The Angular-UI-Router version 1.0.11 is cautioning against the use of a class instead of an ID in the jarvis.widget.js file, stating "Warning: It appears you are using a

Retrieving content dynamically using ajax

FadeOut/FadeIn Iframe Animation

Achieving smooth transitions with CSS3 when removing a class

Activate the function for items that are overlapping

Transform a string into a boolean value for a checkbox

Insert text within the switch component using Material-UI

Rendering in ThreeJS Causes IE11 to Crash