cancel
Showing results for 
Search instead for 
Did you mean: 

How do I make Radio Button label clickable?

lisa_miller3
Participant
0 Kudos

In just plain HTML, the following code will allow me to click on the radio button label text to select that radio button:

<label for="radio1">Radio Button label</label>

<input type="radio" value="Selected" id="radio1" />

How can I do the same thing using HTMLB?

<htmlb:radioButton id = "buttonAll"

text = "All"

key = "ALL"

tooltip = "View All" />

Wrapping the htmlb:radioButton with a <label></label> does not work - any ideas?

Accepted Solutions (1)

Accepted Solutions (1)

lisa_miller3
Participant
0 Kudos

I think I wasn't clear enough in my question - I have a number of HTMLB radio buttons defined within an HTMLB radio button group - these are working correctly.

Currently, I have to click on the radio button circle in order to select a specific button. I want to be able to also click on the label which displays after the radio button in order to select that specific button. It is much easier to select a particular button if you have a larger target you can click on.

I can do this in plain HTML as shown in the original post. But I have not found a way to do this same thing using HTMLB. Has anyone else found a way to make this work?

thomas_jung
Developer Advocate
Developer Advocate
0 Kudos

What content design are your using? In Design2003 the radiobutton item texts are clickable. Only in the older designs is it not clickable. You should always be using Design2003.

Check out SBSPEXT_HTMLB for the sample.

Former Member
0 Kudos

Hi Lisa,

I tried out with the code above on my system,I could select the radio button even if I click on the lable.

Check out the code I mention in my earlier reply.

Regards,

Venkatesh.

lisa_miller3
Participant
0 Kudos

Thomas,

I am using Design2002 - I guess that is why I can't get this to work.

Thanks,

Lisa

thomas_jung
Developer Advocate
Developer Advocate
0 Kudos

CLASSIC and DESIGN2002 should really be avoided. They are only still active for backwards compatibility. A little bird told me recently that SAP might even disable them all together in a very near future release of the WebAS. If you still have applications using CLASSIC or DESIGN2002, I would suggest that you seriously considering updating to DESIGN2003 soon.

Answers (3)

Answers (3)

Former Member
0 Kudos

hello lisa,

in htmlb you have a extension called "label", look at se80->BSP_EXTENSION->HTMLB and at se80->BSP_APPLICATION->SBSPEXT_HTMLB for a Example.

so before your <htmlb:radioButton>..</..> you have to write <htmlb:label> with the parameter "for" is the parameter "id" of the radio button. (please look at the documentation for correct paramters)

hope that works

Daniel

Former Member
0 Kudos

uppsss.. wrong answer, just not looking at the top "clickable". sorry for this!

Former Member
0 Kudos

HI Lisa,

This is the way u use the radioButton Control.


<htmlb:radioButtonGroup id="myid">
        <htmlb:radioButton id="id_red" text="Red" key="key_red"/>
        <htmlb:radioButton id="id_blue" text="Blue" key="key_blue"/>
        <htmlb:radioButton id="id_green" text="Green" key="key_green"/>
</htmlb:radioButtonGroup>

refer the example <b>sbspext_htmlb</b>

regards,

Venkatesh

pravesh_verma
Active Contributor
0 Kudos

Hi Lisa,

You have to also add the <b>disable</b> attribute to the following code. This is because, <i>if the radioButton is disabled it is not selectable.</i>

Replace the code with:

<htmlb:radioButton id = "buttonAll"

text = "All"

key = "ALL"

tooltip = "View All"

disabled="false"

/>

I would also suggest you to wrap the htmlb:radioButton code in <htmlb:radioButtonGroup></htmlb:radioButtonGroup>

Hope this Solves your problem.

Regards

Pravesh

lisa_miller3
Participant
0 Kudos

Just a note: if you look at the class CL_HTMLB_RADIOBUTTON, the disabled attribute has a default value of 'false' and should not be required in the radioButton definition unless the value of 'true' is needed.

But the issue is not that the radio button does not work, but that I would like to be able to click the radio button's label in order to activate it.

Thanks,

Lisa