Reset Radio button option

Hi,

I have four different radio buttons each with only one option...in a DCT..
[html]

Create a form of type Article with this DCT.

Select The Layout by selecting one of the four options
Choose Your Article Layout

[/html]

If 1st radio button is selected i want to deselect or make selected=false; for the remaining three radio buttons..How can I do this in FORM API?Can someone please suggest..

Thanks in advance..

Find more posts tagged with

Comments

ISCBorisB

Radio Button Control implies mutually exclusive Options. If that's really the case make a single radio-button
Item with 4 Options. Then "One Button On, all the rest Off" behavior will be automatic, you do not have to code
anything

tirrudev

Thanks for the response...Borris..

I reason I took four radio button items is:

1.I am including the images for each radio button in the backgrond using css.This is the requirement from the customer that we should have four radio buttons with images and depending on the selection.The items should change their visibility.I tried in the following way:
[html]
IWEventRegistry.addFormHandler("onFormInit", initDCT);
function initDCT()
{
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_2","onItemChange",LinkTypeChange)
}
function LinkTypeChange()
{
if item1radio button is selected make the other three deselected/*This is what i need*/
}
[/html]
Thanks in Advance

nipper

Well there is no way to clear a single option radio button through the GUI. I am not even certain if you can do this via FormAPI. you set a radio button with a radioItem.setValue(someIndex); where someIndex is the 0 based index of the option to be set. Obviously you do not want any set. You can try setValue() and see if that clears it.

Adam Stoller

Well there is no way to clear a single option radio button through the GUI. I am not even certain if you can do this via FormAPI. you set a radio button with a radioItem.setValue(someIndex); where someIndex is the 0 based index of the option to be set. Obviously you do not want any set. You can try setValue() and see if that clears it.

You might be able to get the Option(s) and explicitly set selected="false" and then re-apply the options to the item.
Alternatively, following along that idea - it might be better to make them single checkbox items (which can be selected, de-selected, etc.)

ISCBorisB

I am including the images for each radio button in the backgrond using css

What exactly does styling have to do to functionality?

If memory serves in one of your former threads I've proposed that you style a single radio button
Item with the "combined" Item/Container's background Image that encapsulates all four Icons.

crosstabChart.rptdesign

crosstabData.xlsx

Migrateduser

Here you go. This will get you started.

Click the radio button to the right of Article_Layout_1 first, then click the radio button to the left of it and you will see the second button unselect.

[PHP]
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_0","onItemChange", changeMe);

function changeMe(item)
{
var xx = top.getDCFrame(self).formframe.document.dcreditForm;

for(i=0; i {
if(xx.elements.name="Article/layout/Article_Layout_1"){
xx.elements.checked = false;
}
}
}
[/PHP]

Note: remove the space between "dcreditFor m". Forum is up to it's old tricks.

tirrudev

Thanks for all your responses.I could get to deselect the radio buttons if one is selected.

What exactly does styling have to do to functionality?

If memory serves in one of your former threads I've proposed that you style a single radio button
Item with the "combined" Item/Container's background Image that encapsulates all four Icons.

Yes Borris..We can use a "combined" Item/Containers background image.. tried that but the images are big and I could not increase the space between the options usinf css if i use only one radio button item.This is the reason I took four radio buttons and have to acheive this functionality.

I refered to [thread=20153]this[/thread] thread and used the code

ISCBorisB

Click the radio button to the right of Article_Layout_1 first, then click the radio button to the left...

This will not work for the radio buttons (it *may* for the check boxes). As has been already noted by Nipper, single selected radio button
can not be un-selected with GUI, onItemChange will not fire etc...

ISCBorisB

I could not increase the space between the options...

That's all you really need?

For the single radio Item with multiple Options instead of
<option value="this or that" label=""/>

Try
<option value="this or that" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"/>

Block "&nbsp;" above is simply XML Entity Syntax to represent HTML "non-breakable Space". Repeat the
whole block as many times as you want

Oh, btw tirrrrudev... Please note that there is only one 'r' in my name

Migrateduser

Since I don't have the css or your images I am not sure this will really work for you. But here's something that uses removing item options to give the appearance of unselecting the other radio buttons. It has some visual quirks, but you may be able to work through them.

Note: I changed out your options values to something else in my code, just because they bugged me.

[PHP]

Select The Layout by selecting one of the four options
Choose Your Article Layout

[/PHP]
[PHP]

init();

function init()
{
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_0","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_1","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_2","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_3","onItemChange", changeRadioButtons);

}

function changeRadioButtons(item)
{
if(item.getName() == "/Article/layout/Article_Layout_0"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_0").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_1"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_2"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_3"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setValue(0);
}

}

function removeAndRecreateItems(){

IWDatacapture.getItem("/Article/layout/Article_Layout_0").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_1").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_2").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_3").removeOption(0);

IWDatacapture.getItem("/Article/layout/Article_Layout_0").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setLabel("");

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_0", "aaa", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_0").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_1", "bbb", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_2", "ccc", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_3", "ddd", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setOptions(newOptions);

}
[/PHP]

ISCBorisB

Since I don't have the css or your images I am not sure this will really work for you. But here's something that uses removing item options to give the appearance of unselecting the other radio buttons. It has some visual quirks, but you may be able to work through them.

Note: I changed out your options values to something else in my code, just because they bugged me.

[PHP]init();

function init()
{
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_0","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_1","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_2","onItemChange", changeRadioButtons);
IWEventRegistry.addItemHandler("/Article/layout/Article_Layout_3","onItemChange", changeRadioButtons);

}

function changeRadioButtons(item)
{
if(item.getName() == "/Article/layout/Article_Layout_0"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_0").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_1"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_2"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setValue(0);
}

if(item.getName() == "/Article/layout/Article_Layout_3"){
removeAndRecreateItems();
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setValue(0);
}

}

function removeAndRecreateItems(){

IWDatacapture.getItem("/Article/layout/Article_Layout_0").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_1").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_2").removeOption(0);
IWDatacapture.getItem("/Article/layout/Article_Layout_3").removeOption(0);

IWDatacapture.getItem("/Article/layout/Article_Layout_0").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setLabel("");
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setLabel("");

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_0", "aaa", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_0").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_1", "bbb", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_1").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_2", "ccc", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_2").setOptions(newOptions);

newOptions = new Array();
newOptions[0] = new Option("Article_Layout_3", "ddd", false, false);
IWDatacapture.getItem("/Article/layout/Article_Layout_3").setOptions(newOptions);

}
[/PHP]

Since you insist, let me try one more time...

This will not work for the radio buttons (it *may* for the check boxes). As has been already noted by Nipper, single selected radio button
can not be un-selected with GUI, therefore "onItemChange" will never fire etc...

Besides, all that tirrudev needs is OTB Functionality, no code needed - at all.
He just has to Style it properly with CSS, that's it

Migrateduser

Borrrrrris. Why so angrrrrrrrrry. Too many rrrrrrrrrrrrrrr's make you crrrrrrrrrranky.

I am not unselecting them. Just removing and recreating them.

If he can style them with css, then I agree, that would be the best solution.

ISCBorisB

[

I am not unselecting them. Just removing and recreating them.

Sigh... You do not want to listen, do you?

It will never work, just try it. Yes, your function removes this or that, etc. Problem is, you execute it on the "onItemChange" Event.
That will happen only once per button - when you select it. Since you can never un-select single Item Radio Button with the GUI,
"onItemChange" Event will not fire any longer and the function won't be called, no matter what it does.

Migrateduser

Sigh. Borrrris, you crack me up. You doubt that which you have never even tried.

See the attached video. It shows the code in action. Sorry about the crappy video quality.

What you don't seem to understand is that the code removes the option thus resulting in it thinking that it's no longer selected. As a result, the onItemChange still sees it as unselected. In my case, I have removed the options for the items and the labels and added back in the labels and options which allows it to respond to an onItemChange event over and over again since the radio button selection that was once there is no longer there to cause the onItemChange to think it's selected. Understand?

ISCBorisB

Understand?

Yes, the code will work, I've missed that. What I fail to understand though is why do you need 60+ lines of code to mimic OTB functionality?

Migrateduser

I worked on it mostly as a challenge. I wanted to see if I could make it work with the code he provided. Just for fun.

I agree, if he can solve it with CSS and the OOTB code, then more power to him, CSS is definitely the way to go.