<b>Introduction</b>
<p>I found out that there is a bug with the javascript api of radio button control while helping few people on SDN forum. So, in this weblog i am posting the error and the solution.</p>
<br><br>
<b> Error:</b>
<p><b>According to the PDK , if you need to do any javascript validation on radio button then you would need to use the following lines of javascript to get hold of radio button.</b></p>
<br>
<textarea rows=9 cols=80>
<script language="javascript">
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var rb1 = eval(func(htmlb_radiobuttonmodifier
+ "radiobutton"));
var rb2 = eval(func(htmlb_radiobuttonmodifier
+ "radiobutton2"));
........
</script>
</textarea>
<br><br>
<p> The above lines do not work. <b>The browser keeps giving object not defined error. The problem it turns out is that the generated ids of the radio buttons are completely different from ids generated by above lines of code( i found this by viewing the generated html and javascript ).</b>.
<br>
<br>
<b>Example: In the the following JSP i should be able to get hold of radio buttons value and see if they are checked or not.</b></p>
<br>
<textarea rows=60 cols=80>
<%@ taglib uri="tagLib" prefix="hbj" %>
<script language="javascript">
function checkRadio() {
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var rb1 = eval(func(htmlb_radiobuttonmodifier
+ "RBGenderFemale"));
alert(rb1.getValue());
alert(rb1.getChecked());
var rb2 = eval(func(htmlb_radiobuttonmodifier + "RBGenderMale"));
alert(rb2.getValue());
alert(rb2.getChecked());
}
</script>
<hbj:content
id="myContext">
<hbj:document>
<hbj:documentHead
title="test">
</hbj:documentHead>
<hbj:documentBody>
<hbj:form
id="simpleForm">
<hbj:inputField
id="InputName"
type="string"
maxlength="100"
value="Your name here"
jsObjectNeeded="true">
</hbj:inputField>
<br>
<hbj:radioButtonGroup
id="Genderselect"
columnCount="2"
selection="rb_fem">
<hbj:radioButton
id="RBGenderFemale"
text="female"
key="rb_fem"
tooltip="I am female"
disabled="false"
jsObjectNeeded="true"
/>
<hbj:radioButton
id="RBGenderMale"
text="male"
key="rb_male"
tooltip="I am male"
disabled="false"
jsObjectNeeded="true"
/>
</hbj:radioButtonGroup>
<br>
<hbj:button
id="SubButton"
text="Submit"
tooltip="Sends your info"
onClientClick="checkRadio()"
width="30px"
design="EMPHASIZED"
jsObjectNeeded="true">
</hbj:button>
</hbj:form>
</hbj:documentBody>
</hbj:document>
</hbj:content>
</textarea>
<br><br>
<b> Solution:</b>
<p><b>I had to hack around and i found out that generated ids of radio button are combination of following information.
<br>
<br>
generated ID of radio button = id of radio button group + last four characters of variable htmlb_radiobuttonmodifier + index of the radio button within that group (Example 1,2...4)
</b></p>
<br>
<br>
<textarea rows=60 cols=80>
<%@ taglib uri="tagLib" prefix="hbj" %>
<script language="javascript">
function checkRadio() {
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
//you have to use the name of radio group
var rb1 = eval(func("Genderselect" +
htmlb_radiobuttonmodifier.substring(3,7)+ "1"));
var rb2 = eval(func("Genderselect" +
htmlb_radiobuttonmodifier.substring(3,7)+ "2"));
alert(rb1.getValue());
alert(rb1.getChecked());
alert(rb2.getValue());
alert(rb2.getChecked());
}
</script>
<hbj:content
id="myContext">
<hbj:document>
<hbj:documentHead
title="test">
</hbj:documentHead>
<hbj:documentBody>
<hbj:form
id="simpleForm">
<hbj:inputField
id="InputName"
type="string"
maxlength="100"
value="Your name here"
jsObjectNeeded="true">
</hbj:inputField>
<br>
<hbj:radioButtonGroup
id="Genderselect"
columnCount="2"
selection="rb_fem">
<hbj:radioButton
id="RBGenderFemale"
text="female"
key="rb_fem"
tooltip="I am female"
disabled="false"
jsObjectNeeded="true"
/>
<hbj:radioButton
id="RBGenderMale"
text="male"
key="rb_male"
tooltip="I am male"
disabled="false"
jsObjectNeeded="true"
/>
</hbj:radioButtonGroup>
<br>
<hbj:button
id="SubButton"
text="Submit"
tooltip="Sends your info"
onClientClick="checkRadio()"
width="30px"
design="EMPHASIZED"
jsObjectNeeded="true">
</hbj:button>
</hbj:form>
</hbj:documentBody>
</hbj:document>
</hbj:content>
</textarea>
