How can you reset a radio button

Submitted by Sherman on Mon, 07/11/2011 - 15:12

We have bound our form controls to an XML fragment which is stored as one field in our database. We occasionally must unset a previously selected radio group to null (no option selected) though script. While the control appears correctly on the form display, the original value is retained and thus saved back in to the DB. Is there a way to clear a radio button selection through javascript?

RE: How can you reset a radio button

Hi Sherman,

You can normally unset a radio button value with script by finding the currently selected radio control, and then setting its checked property to false. For example you could use a function like:

/**
 * Unselects the currently selected option for the given radio control.
 * @param name The name of the radio group to reset.  This is the name of the control in FormMaker.
 */
function clearRadio(name)
{
    //get the form reference
    var f = hyf.FMAction.getFormValidator().getForm();
    
    //find the radio array
    var arr = f[name];
    
    //loop through each radio button
    for (var i = 0; i < arr.length; ++i)
    {
        //if it is selected, then remove this setting
        if (arr[i].checked)
        {
            arr[i].checked = false;
        }
    }
}

In most cases this will work fine, as it will unset the control on the screen, and stop it submitting a value to the server.
I am assuming this is the type of approach that you have already tried, as you mention that the control is appearing correctly on the screen when it is reset.

The main scenario where this might not be enough is when you are using the 'Maintain Additional Data' action binding option, and are trying to update this maintained data with the values from the screen.
When the radio button is cleared using this type of function it will not submit a value to the server. Therefore in the binding process there is no data available to overwrite the existing value with.
This means that after the submission the XML data will still contain the previously selected radio value.

To resolve this problem, you will need to update the reset/clear function to something like the following:


/**
 * Unselects the currently selected option for the given radio control.
 * @param name The name of the radio group to reset.  This is the name of the control in FormMaker.
 */
function clearRadio(name)
{
    //get the form reference
    var f = hyf.FMAction.getFormValidator().getForm();
    
    //find the radio array
    var arr = f[name];
    
    //loop through each radio button
    for (var i = 0; i < arr.length; ++i)
    {
        //if it is selected, then remove this setting
        if (arr[i].checked)
        {
            arr[i].checked = false;
        }
        
        //make sure we remove the blank value hidden field when a value is next selected.
        dojo.connect(arr[i], 'onclick', function() {
                var objHiddenField = dojo.byId('hidden' + this.name)
                if (objHiddenField != null)
                {
                    objHiddenField.parentNode.removeChild(objHiddenField);
                }                    
            });
    }
    
    //add in a hidden field to submit the blank value
    var objHiddenField = document.createElement('input');
    objHiddenField.id = 'hidden' + name;
    objHiddenField.name = name;
    objHiddenField.type = 'hidden';
    objHiddenField.value = '';
    f.appendChild(objHiddenField);
}

This will create a hidden field when the radio button is reset to make sure the blank value is still submitted to the server, in order to overwrite any existing value in the XML data.

I hope this helps.

RE: How can you reset a radio button

Thanks Gerard
The hidden field manipulation was the missing piece since we are, in fact, using the "Maintain Additional Data" option...

RE: How can you reset a radio button

Hi Gerard,

I made a simple function to clear all fields in a layout group (not only radio buttons but also the other fields).

Could you review the code below if that works?

I tested the code in a sample project, it seems working.

Thanks,
Taeho.BPM

/**???+?*???+?reset???+?all???+?field???+?values???+?in???+?a???+?layout???+?group???+?*???+?layoutGroupName???+?name???+?The???+?name???+?of???+?the???+?layout???+?group???+?to???+?reset.???+?*/function???+?clearLayoutGroup(layoutGroupName)???+?{???+????+????+????+?var???+?objContainer???+?=???+?{name:???+?'Container',???+?option:???+?'PageGroup',???+?value:???+?layoutGroupName};???+????+????+????+?var???+?objMode???+?=???+?{name:???+?'Mode',???+?option:???+?'clear',???+?value:???+?''};???+????+????+????+?hyf.FMAction.handleContainerReset(objContainer,???+?objMode);}???+?

RE: How can you reset a radio button

Hi Taeho,

Your function is calling the same processing as the 'Container Reset' action so should work fine.

This however performs the equivalent to the first function above for radio buttons so will not clear out the existing data on the server if you are using the 'Maintain Additional Data' option.
If you need this you would need to extend your function to provide the extra hidden field creation process for radio buttons as described above.