ClientSide Javascript on RadioButton Selection

Question

Hello together,
I've seen some examples of how to perform a clientside javascript function from an htmlb element(inputfield).
I want to add this functionality to a radiobutton-group but can not realize it.
This is where I am:
<hbj:radioButtonGroup
id="radioGroup"
columnCount="1"
selection="BOL"
>
<hbj:radioButton
id="BOLProducts"
text="BOL Products"
key="BOL"                      
tooltip="Search BOL products"
jsObjectNeeded="TRUE"
>
<%
     BOLProducts.setClientEvent(EventTrigger.ON_CLICK,"searchBOL()");
%>
</hbj:radioButton>
<hbj:radioButton
id="MOLProducts"
text="MOL Products"
key="MOL"
tooltip="Search MOL products"
jsObjectNeeded="TRUE"
>
</hbj:radioButton>
</hbj:radioButtonGroup>
But when I try this, I get a NullPointerException!
Any help would be great.
Thanks,
Andy

Answer 1

HI,
Code
=====
<%@ taglib uri="tagLib" prefix="hbj" %>
<%@ page import = "com.sapportals.htmlb.enum.EventTrigger" %>
<%@ page import = "com.sapportals.htmlb.event.Event;"%>
<hbj:content id="myContext" >
  <hbj:page title="PageTitle">
  <script>
function process(){
alert('hi');
</script> 
<hbj:form id="myFormId" >
<hbj:radioButtonGroup
id="radioGroup"
columnCount="1"
selection="BOL"
>
<hbj:radioButton
id="BOLProducts"
text="BOL Products"
key="BOL"
tooltip="Search BOL products"
jsObjectNeeded="TRUE">
<% radioGroup.getRadioButtonForKey("BOL").setClientEvent(EventTrigger.ON_CLICK, "process()"); %>
</hbj:radioButton>
<hbj:radioButton
id="MOLProducts"
text="MOL Products"
key="MOL"
tooltip="Search MOL products"
jsObjectNeeded="TRUE"
>
</hbj:radioButton>
</hbj:radioButtonGroup>
   </hbj:form>
  </hbj:page>
</hbj:content>
To get the radio button object inside JS use:
    function calculateCurrencyFromTo(){
         var funcName = htmlb_formid+"_getHtmlbElementId";
         func = window[funcName];
         var rb = eval(func(htmlb_radiobuttonmodifier+"radiobutton"));
Also Refer javascript API in the following LINK
<a href="http://help.sap.com/saphelp_nw04/helpdata/en/0c/9e0e41a346ef6fe10000000a1550b0/frameset.htm">JavaScript API</a>
========================================================
Try the code i have posted now
The code is working fine for me, i don't know why the text is invisible for you?
Label for both radio buttons invisible?
Message was edited by: Kirupanand Venkatapathi
======================================================
Can you post the full code of your JSP
Message was edited by: Kirupanand Venkatapathi
========================================================
I removed the bean accessing code snippets, try executing the following code and see whether you get the UI display correctly.
<%@ taglib uri="tagLib" prefix="hbj" %>
<%@ page import = "com.sapportals.htmlb.enum.EventTrigger" %>
<%@ page import = "com.sapportals.htmlb.event.Event;"%>
<hbj:content id="myContext" >
<hbj:page title="PageTitle">
<hbj:form id="myFormId" >
<script language="JavaScript">
function searchBOL() {
alert('hi');
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var inputfield1 = eval(func("txtEquipmentNumberFrom"));
if (inputfield1.isEnabled) {
inputfield1.setDisabled();
inputfield1.setValue("");
var inputfield2 = eval(func("txtEquipmentNumberTo"));
if (inputfield2.isEnabled) {
inputfield2.setDisabled();
inputfield2.setValue("");
var inputfield3 = eval(func("txtEquipmentDescription"));
if (inputfield3.isEnabled) {
inputfield3.setDisabled();
inputfield3.setValue("");
var inputfield4 = eval(func("txtSerialNumberFrom"));
if (inputfield4.isEnabled) {
inputfield4.setDisabled();
inputfield4.setValue("");
var inputfield5 = eval(func("txtSerialNumberTo"));
if (inputfield5.isEnabled) {
inputfield5.setDisabled();
inputfield5.setValue("");
function searchMOL() {
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var inputfield1 = eval(func("txtEquipmentNumberFrom"));
if (!inputfield1.isEnabled) inputfield1.setEnabled();
var inputfield2 = eval(func("txtEquipmentNumberTo"));
if (!inputfield2.isEnabled) inputfield2.setEnabled();
var inputfield3 = eval(func("txtEquipmentDescription"));
if (!inputfield3.isEnabled) inputfield3.setEnabled();
var inputfield4 = eval(func("txtSerialNumberFrom"));
if (!inputfield4.isEnabled) inputfield4.setEnabled();
var inputfield5 = eval(func("txtSerialNumberTo"));
if (!inputfield5.isEnabled) inputfield5.setEnabled();
</script>
<hbj:gridLayout
id="grid1"
cellSpacing="5">
<hbj:gridLayoutCell
rowIndex="1"
columnIndex="1"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="1"
columnIndex="2"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="1"
columnIndex="3"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="1"
columnIndex="4"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="2"
columnIndex="1"
>
<hbj:label
id="lblMaterialNumberFrom"
text="Material Number from:"
labelFor="txtMaterialNumberFrom"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="2"
columnIndex="2"
>
<hbj:inputField
id="txtMaterialNumberFrom"
type="string"
maxlength="100"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="2"
columnIndex="3"
>
<hbj:label
id="lblMaterialNumberTo"
text="Material Number to:"
labelFor="txtMaterialNumberTo"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="2"
columnIndex="4"
>
<hbj:inputField
id="txtMaterialNumberTo"
type="string"
maxlength="100"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="3"
columnIndex="1"
>
<hbj:label
id="lblMaterialDescription"
text="Material Description:"
labelFor="txtMaterialDescription"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="3"
columnIndex="2"
>
<hbj:inputField
id="txtMaterialDescription"
type="string"
maxlength="100"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="3"
columnIndex="3"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="3"
columnIndex="4"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="4"
columnIndex="1"
>
<hbj:label
id="lblEquipmentNumberFrom"
text="Equipment Number from:"
labelFor="txtEquipmentNumberFrom"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="4"
columnIndex="2"
>
<hbj:inputField
id="txtEquipmentNumberFrom"
type="string"
maxlength="100"
disabled="TRUE"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="4"
columnIndex="3"
>
<hbj:label
id="lblEquipmentNumberTo"
text="Equipment Number to:"
labelFor="txtEquipmentNumberTo"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="4"
columnIndex="4"
>
<hbj:inputField
id="txtEquipmentNumberTo"
type="string"
maxlength="100"
disabled="TRUE"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="5"
columnIndex="1"
>
<hbj:label
id="lblEquipmentDescription"
text="Equipment Description:"
labelFor="txtEquipmentDescription"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="5"
columnIndex="2"
>
<hbj:inputField
id="txtEquipmentDescription"
type="string"
maxlength="100"
disabled="TRUE"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="6"
columnIndex="1"
>
<hbj:label
id="lblSerialNumberFrom"
text="Serial Number from:"
labelFor="txtSerialNumberFrom"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="6"
columnIndex="2"
>
<hbj:inputField
id="txtSerialNumberFrom"
type="string"
maxlength="100"
disabled="TRUE"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="6"
columnIndex="3"
>
<hbj:label
id="lblSerialNumberTo"
text="Serial Number to:"
labelFor="txtSerialNumberTo"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="6"
columnIndex="4"
>
<hbj:inputField
id="txtSerialNumberTo"
type="string"
maxlength="100"
disabled="TRUE"
jsObjectNeeded="TRUE"
>
</hbj:inputField>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="8"
columnIndex="1"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="8"
columnIndex="2"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="8"
columnIndex="3"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="8"
columnIndex="4"
>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="9"
columnIndex="1"
verticalAlignment="TOP"
>
<hbj:label
id="lblSearchFor"
text="Search for:"
labelFor="searchItems"
>
</hbj:label>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="9"
columnIndex="2"
id="cell1"
>
<hbj:radioButtonGroup
id="radioGroup"
columnCount="1"
selection="BOL"
>
<hbj:radioButton
id="BOLProducts"
text="BOL Products"
key="BOL"
tooltip="Search for BOL products"
jsObjectNeeded="TRUE"
>
<% radioGroup.getRadioButtonForKey("BOL").setClientEvent(EventTrigger.ON_CLICK, "searchBOL()"); %>
</hbj:radioButton>
<hbj:radioButton
id="MOLProducts"
text="MOL / EOL Products"
key="MOL"
tooltip="Search for MOL/EOL products"
jsObjectNeeded="TRUE"
>
</hbj:radioButton>
</hbj:radioButtonGroup>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="11"
columnIndex="1"
>
<hbj:button
id="btnSearchButton"
text="Search Products"
onClick="searchProducts"
design="STANDARD"
>
</hbj:button>
</hbj:gridLayoutCell>
<hbj:gridLayoutCell
rowIndex="11"
columnIndex="2"
>
<hbj:button
id="btnClear"
text="Clear Search"
onClick="clearSearch"
design="STANDARD"
>
</hbj:button>
</hbj:gridLayoutCell>
</hbj:gridLayout>
</hbj:form>
</hbj:page>
</hbj:content>
Message was edited by: Kirupanand Venkatapathi
=======================================================
I don't know why the text is invisible for you. Take out the rest of the code and test only the radiobutton code.
The text is displaying fine for me.
<%@ taglib uri="tagLib" prefix="hbj" %>
<%@ page import = "com.sapportals.htmlb.enum.EventTrigger" %>
<%@ page import = "com.sapportals.htmlb.event.Event;"%>
<hbj:content id="myContext" >
  <hbj:page title="PageTitle">
  <script>
function process(){
alert('hi');
</script> 
<hbj:form id="myFormId" >
<hbj:radioButtonGroup
id="radioGroup"
columnCount="1"
selection="BOL">
<hbj:radioButton
id="BOLProducts"
text="BOL Products"
key="BOL"
tooltip="Search BOL products"
jsObjectNeeded="TRUE">
<% radioGroup.getRadioButtonForKey("BOL").setClientEvent(EventTrigger.ON_CLICK, "process()"); %>
</hbj:radioButton>
<hbj:radioButton
id="MOLProducts"
text="MOL Products"
key="MOL"
tooltip="Search MOL products"
jsObjectNeeded="TRUE">
<% radioGroup.getRadioButtonForKey("MOL").setClientEvent(EventTrigger.ON_CLICK, "process()"); %>
</hbj:radioButton>
</hbj:radioButtonGroup>
<hbj:radioButtonGroup
id="Genderselect"
columnCount="2"
selection="rb_fem" >
<hbj:radioButton
id="RBGenderFemale"
text="female"
key="rb_fem"
jsObjectNeeded="true">
<% Genderselect.getRadioButtonForKey("rb_fem").setClientEvent(EventTrigger.ON_CLICK, "process()"); %>
</hbj:radioButton>
<hbj:radioButton
    id="RBGenderMale"
    text="male"
    key="rb_male">
</hbj:radioButton>
</hbj:radioButtonGroup>
   </hbj:form>
  </hbj:page>
</hbj:content>
Message was edited by: Kirupanand Venkatapathi