Skip to Content

<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>

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Craig Cmehil
    Prakash this weblog is quite a disappointment.

    No explanations, no text, no going through it step by step?

    Definetely not up to your usual standard of weblogs, hopefully you will rethink and perhaps edit the weblog. I mean 2 large segments of code is not something I would consider from you as a “published” and “final” weblog.

    (0) 
    1. Prakash Singh Post author
      Hi Craig
          Thank you for the feeback. Sorry, i should have described the problem a little bit more. I have updated the weblog with details of the error. Thank you.

      Prakash

      (0) 

Leave a Reply