The requirement is the user can select any one of the status radio or if he doesn't want to select the status radio he can deselect it. how to deselect the selected radio by clicking the same radio button.


Hello Santhu.

This is more a web development question than OS. Checkboxes are meant to be seen as a group. You have to select one. Therefore, unselecting is unnatural.


I see some options:

1) Do fake radios. Use checkboxes and in an action clear all the others selected before.

2) use javascript. 

document.getElementById('foo').checked = false"

3) attribute an invalid value. It will make the variable unable to find the radio to check.

santhu MS wrote:

 The requirement is the user can select any one of the status radio or if he doesn't want to select the status radio he can deselect it. how to deselect the selected radio by clicking the same radio button.


Hello Santhu.

To select one radio you have to bound all buttons to same variable.

For deselecting you can customise javascript

[

<script>

 Function change Radiobtnvalue(id);

]


Hi Santhu,

Adding to the above stated solution statements, I just want to include the actual implementation.

Steps To Follow:

1) Add the below mentioned JavaScript within the Expression widget (Escape Content - No) or within the Screen JavaScript section

JS Code Snippet

"<script>
   function changeTheRadioBtnValue(id) {
    var radioBtnElement = document.getElementById(id); 

    if (radioBtnElement.classList.contains('contain-value')) {
        radioBtnElement.classList.remove('contain-value');
        document.getElementById('" + ButtonHidden.Id + "').click(); //Reset the value
        radioBtnElement.checked = false;           
    } else {
        var radioBtnGroup = document.getElementsByClassName('contain-value'); 
        for (var i = 0; i < radioBtnGroup.length; i++) {
            radioBtnGroup[i].checked = false;
            radioBtnGroup[i].classList.remove('contain-value');
        }
        radioBtnElement.classList.add('contain-value');
    }
}
</script>"

Note: You'll have to add a class (i.e. contain-value) to Radio Button widget in order to distinguish whether the Radio button is checked previously or not.

2) Invoke the above defined JS function i.e. changeTheRadioBtnValue on every onclick of the Radio button as mentioned below.

3) In the Footer section, Introduce an hidden button (style= "display:none") to reset the variable mapped to the Radio button to NullIdentifier() when the end-user un-check the radio button

Set the Hidden Button Method type to Ajax Submit 

See the sample application

Hope this helps you!


Regards,

Benjith Sam


thanks, Benjith Sam


It would be helpful if you share that oml file, it's partially working. if the user clicks multiple times it's not working properly. 

Thanks

Santhu

Thanks, Nuno Reis 

I tried with your solution but it is taking time while switching from one checkbox to another.

Thanks 

Santhu

Solution

santhu MS wrote:

thanks, Benjith Sam


It would be helpful if you share that oml file, it's partially working. if the user clicks multiple times it's not working properly. 

Thanks

Santhu

You are welcome, Santhu :)

See the attached .oml solution file


Regards,

Benjith Sam

Solution

Thank you for the solution Benjith Sam it's working fine.


Regards

Santhu

santhu MS wrote:

Thank you for the solution Benjith Sam it's working fine.


Regards

Santhu

You are welcome, Santhu :)

Glad I could be of help :)


Regards,

Benjith Sam