Refresh HTMLB checkbox by JavaScript

Hi all, I have two HTMLB checkboxes on the browser(IE6.0).
I would like to selecte one of thses and set the other one
checked or unchecked. I can get the checkbox's ID on the client side. I can display the boolean value if the checkbox is checked or unchecked. But I can not set the checkbox checked or unchecked and let it displayed. The Javascript code on client side is shown as below:
// ckid - id of the target checkbox,
// myContent - objct of PageContext
// test() is triggered by one of the two chechboxes
//String ck_id=myContext.getParamIdForComponent(ckid);
<script language="JavaScript">
function test()
   var myval = document.getElementById('<%=ck_id%>');
   alert(myval.checked);
   myval.checked = true;
Any hint will be appreciated.
Best regards.
Wang

Hi Dagfinn, thanks for reply. My code is as follows, the missing 'e' is my typing error,
String s2 = "<script>"
+"function toggle1(){"
+"document.forms[\'myForm\'].checkbox1.checked=!document.forms[\'myForm\'].checkbox1.checked"
+"}"
+ "function toggle2(){"
+"document.forms[\'myForm\'].checkbox2.checked=!document.forms[\'myForm\'].checkbox2.checked"
+"}"
+"</script>"
+"<body>"
+"<form name=\"myForm\">"
+"<INPUT TYPE=CHECKBOX NAME=\"checkbox1\" onClick=\"toggle2();\">Check me1</input>"
+"<INPUT TYPE=CHECKBOX NAME=\"checkbox2\" onClick=\"toggle1();\">Check me2</input>"
+"</form>"
+"</body>";
getForm().addRawText(s2);
The error message happens to both of them when they are clicked.
Thanks for reply.
BR.
Wang

Similar Messages

Controll HTMLB:Checkbox via JavaScript

Hi all,
I`ve created a BSP application containing HTMLB:Checkbox components.
In this example the checkboxes are organized as a three of 2 levels.
When clicking/checking the parent checkbox, I want the rest of the checkboxes (children) to change status depending on their parent's status. e.g checked=true/false and disabled=true/false. The checkboxes become disabled/enabled, but you cannot see any change in their checked/unchecked status.
Though this works fine with design="classic", it doesn't when using design="design2003"...
I have to use design2003 in my application, and want to use HTMLB:Checkbox instead of regular HTML Checkbox- which also works.
The javascript syntax follows:
(it's from a loop containing all the children checkboxes)
nodeEl = elements<i>;
nodeEl.checked = true/false;
nodeEl.disabled = false/false;
I would have appreciated any kind of help.
Ogert

This is my intire code, Raja T. The Javascript works fine with regular HTML Checkbox, or HTMLB:Checkbox combined with classic design.
**HTML CODE
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<%<htmlb:content design="classic">%>
<htmlb:content design="design2003">
<htmlb:document>
<htmlb:documentHead>
<script language='javascript' src='control_checkbox.js'></script>
</htmlb:documentHead>
    <htmlb:form>
<table width="309" border="1">
<tr>
    <td width="299" bgcolor="#999999">
    <htmlb:checkbox id        = "E1"
                    text      = "Parent"
                    checked   = "true"
                    onClientClick = "check_chkbox('E1');"/>
    </td>
</tr>
<tr>
    <td><htmlb:checkbox id        = "00111820|Chk0102|E1"
                    text      = "Child 1.1.1.2"/>
    </td>
</tr>
<tr>
    <td><htmlb:checkbox id        = "00111820|Chk0103|E1"
                    text      = "Child 1.1.1.3"/>
    </td>
</tr>
    </htmlb:form>
</htmlb:document>
</htmlb:content>
**Javascript Code:
var forms;
var elements;
function check_chkbox(id) {
var el;
var nodeEl;
var splitname;
var ind = 2;
var name = id;
var tempname = split_name(id,'',ind);
if(tempname != '') {
    ind = 1;
    name = tempname;
getCheckBoxes();
el = document.getElementById(id);
if(!eval(el.checked)) {
    for(i = 0; i < elements.length; i++) {
      splitname = split_name(elements<i>.id,name,ind);
      if(splitname != '') {
        if(elements<i>.id != id && name == splitname) {
          nodeEl = elements<i>;
          nodeEl.checked = false;
          nodeEl.disabled = true;
else {
    for(i = 0; i < elements.length; i++) {
      splitname = split_name(elements<i>.id,name,ind);
      if(splitname != '') {
        if(elements<i>.id != id && name == splitname) {
          nodeEl = elements<i>;
          nodeEl.checked = true;
          nodeEl.disabled = false;
function split_name(name,splitname,ind) {
var split_array = name.split("|");
var size = split_array.length;
var string;
if(size == 3) {
    if(splitname != '') {
      string = split_array[ind];
      array = string.split(splitname);
      if(array[0] == '') {
        return splitname;
    string = split_array[1];
    return string;
return '';
function getCheckBoxes() {
var tempArray = new Array();
if(elements == null) {
    tempArray = document.all;
<%--    case Firefox, Netscape --%>
    if(tempArray == null) {
      forms = document.forms;
      tempArray = forms[0];
    elements = new Array();
    for(i = 0; i < tempArray.length; i++) {
      if(tempArray<i>.getAttribute("type") == "checkbox") {
        elements[elements.length] = tempArray<i>;

Accessing HTMLB checkbox in javascript

Hi,
I have the following scenario:
1) jsp "main.jsp" has a checkbox with id="chkBoxId"
2) In this "main.jsp" at the end, there is a jsp include
   including another jsp "buttons.jsp" - which contains a
   SUBMIT button.
3) On this SUBMIT button, I am calling a javascript
   function "check()" in the "onClientClick" attribute.
4) In this "check()" function I want to access the
   checkBox (present in "main.jsp")
Now when I try doing this using the following code in the check() function, it gives me a "Undefined is null or not an object".
function check(chkBoxId) {
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var chkBox1 = eval(func(chkBoxId));
// The checkbox is obtained
if (chkBox1)
alert("Not Checked");
Plzz help me !!!
regards,
Jitendra

HI,
U can write the javascript function in the header tag or create a .js file in which u write the javascript code.
the javascript code can be like
function ValidateForm()
if(document.form1.s_material.value=="")
alert("enter material");
return false;
return true;
where form1 is id of form and s_material is iD of input field.
In your coding for button onClientClick like :
<htmlb:button id="s_but_submit"
                                   width="20"
                                   onClick="submit"
                                   onClientClick="if(!ValidateForm(this))htmlbevent.cancelSubmit=true;"
Regards,
Siddhartha

Usage of htmlb controls in javascript

hi,
Could anybody give links regarding the usage of htmlb controls in javascript?

Hi Ganesh,
here comes some official documentation: http://help.sap.com/saphelp_nw04/helpdata/en/43/067941a51a1a09e10000000a155106/frameset.htm
Also see these threads on SDN: HTMLB-Javascript and Access HTMLB controll in Javascript
Hope it helps
Detlev
PS: Please consider rewarding points for helpful answers on SDN. Thanks in advance!

HTMLB - RadioButton - setClientEvent Javascript

Hi All,
I have a radiobutton, on click of this i need to display another set of radiobuttons. For this I have javascript function which displays the DIV.
Below is the code for this.
<hbj:radioButtonGroup id="radioGrp" columnCount="1" selection="<%=testBean.getSelectedRadio()%>">
<hbj:radioButton id="radioBtn" key="name" text="Name" jsObjectNeeded="true">
<%
radioGrp.getRadioButtonForKey(radioBtn).setClientEvent(com.sapportals.htmlb.enum.EventTrigger.ON_CLICK, "onSelectRadio('radioBtn)");
%>
</hbj:radioButton>
This works perfectly fine. When i select the radio button, the javascript function is displayed and relative DIV is displayed.
But the problem here is, if I select the radio button and due to any other event on the page, if the page gets refreshed, I am getting below exception (Portal Runtime error) .
Caused by: com.sapportals.htmlb.page.PageException: Eventhandler- "com.sapportals.htmlb.event.LinkClickEvent" or "onCom.sapportals.htmlb.event.LinkClickEvent" not found! '
I have imported the EventTrigger and Event in the jsp. If I comment the radiobutton code, I am not geting the above error.
Please let me know your thoughts . I have been struggling to find a solution for this issue.
Thanks
Sudha
Edited by: sona p on Jan 14, 2010 9:19 PM

Hi,
Try alerting "(theRadio.type)".
If you are getting the proper checkbox instance then the alert should display "checkbox". If that much is working then checking the checkbox is as simple as
var theRadio = eval(func(grpId + htmlb_radiobuttonmodifier.substring(3,7)+ "1"));
if(theRadio)
theRadio.checked = true
By the way what does the function "func" do?
Regards,
Satyajit

Disable HTMLB dropdown with JavaScript

Hi All,
I ran into the following issue:
I have a BSP page that used HTMLB dropdowns and some custom javascript that disabled those dropdowns interactively when a user clicked on a checkbox.
Example: tempDropdown.disabled = true;
Unfortunately, as soon as I changed the control rendering attribute to "SAP", the look&feel of dropdowns changed and they no longer appear to be based on "select-one" HTML object. Therefore, my custom JavaScript no longer works.
Do you know how I could visually (interactively) disable the "SAP" rendered HTMLB dropdown with a custom javascript?
Thanks!
Roman

here is the complete code of my sample.
<b><u>page attribute</u></b>
tab1     TYPE     TIHTTPNVP
tab1_wa     TYPE     IHTTPNVP
tab2     TYPE     TIHTTPNVP
tab2_wa     TYPE     IHTTPNVP
<b><u>layout</u></b>
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003" controlRendering="SAP" >
<htmlb:page title=" " >
    <htmlb:form>
      <%
clear tab1_wa .
refresh tab1 .
move: 'PRI' to tab1_wa-name ,
'Printer' to tab1_wa-value .
append tab1_wa to tab1 .
move: 'FAX' to tab1_wa-name ,
'Fax' to tab1_wa-value .
append tab1_wa to tab1 .
move: 'EMA' to tab1_wa-name ,
'Email' to tab1_wa-value .
append tab1_wa to tab1 .
      %>
      <%
clear tab2_wa .
refresh tab2 .
move: '[email protected]' to tab2_wa-name ,
'Some One' to tab2_wa-value .
append tab2_wa to tab2 .
move: '[email protected]' to tab2_wa-name ,
'Mr X' to tab2_wa-value .
append tab2_wa to tab2 .
move: '[email protected]' to tab2_wa-name ,
'Mr Y' to tab2_wa-value .
append tab2_wa to tab2 .
      %>
<script language="javascript">
function SetDisabled(elem,disable)
var ip = document.getElementById(elem);
ip.disabled = disable ;
</script>
      <htmlb:label for = "DDLB1"
                   text = "Carrier" />
      <htmlb:dropdownListBox id                = "DDLB1"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab1 %>"
                             onClientSelect    = "javascript:dd = document.forms[0].DDLB1; alert(dd.options[dd.selectedIndex].value);"
                             width             = "150" />
      <htmlb:dropdownListBox id                = "DDLB2"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab2 %>"
                             width             = "150" />
      <htmlb:button text          = "Press Me"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'true');" />
    </htmlb:form>
</htmlb:page>
</htmlb:content>
try this in your system and let me know whether it works or not
Regards
Raja

A "preview" checkbox with JavaScript

Hi friends.
I´m writting a JavaScript that sends the active document in an appropriated way to print. Before calling the print command, I wanna display a dialog box asking the number of copies to print. So I thought I could also use this box to show some "auto" adjustments options (for example "auto levels"). If the user active "Apply auto-levels" then image refreshes to show the result (like a live preview). If user disables this box, then auto levels must be retired from image.
Well..hope you do not laught on my solution. The way I found to do it is..apply auto levels and refresh when user enables the field, and return in the history and refresh if the user disables this field. It get the expected result. BUT, if I have more checkboxes in the same dialog box, then this solution will not work so well (sure).
Do you have any other consistent solution to have previews of commands, but retire if the user disables the field?? Would like to learn a little about it.
Well..what I do (the solution I´ve mentioned above) is:
var doc = app.activeDocument;
var c = doc.activeLayer;
var dial = new Window ("dialog", "Print", undefined, {closeButton:false});
dial.orientation = "column";
dial.alignChildren = "fill";
dial.margins = 20;
var dPanel = dial.add ("panel", undefined, "Print options:");
dPanel.orientation = "column";
dPanel.alignChildren = "left";
dPanel.margins = 15;
var aLevels = dPanel.add ("checkbox", undefined, "Apply auto levels");
var dGroup = dial.add ("group", undefined);
dGroup.orientation = "row";
dGroup.alignChildren = "left";
var st = dGroup.add ("statictext", undefined, "Copies:");
var nField = dGroup.add ("edittext", undefined, "1");
nField.characters = 10;
var gButtons = dial.add ("group", undefined);
gButtons.orientation = "row";
gButtons.alignChildren = ["right", "right"];
var exe = gButtons.add ("button", undefined, "Execute", {name:"ok"});
var canc = gButtons.add ("button", undefined, "Cancel", {name:"cancel"});
aLevels.onClick = function (){
    if (aLevels.value){
        c.autoLevels();
        app.refresh();
    else
    if (! aLevels.value){
        doc.activeHistoryState = doc.historyStates[doc.historyStates.length-2];
        app.refresh();
dial.show();
Any idea to forget all of this and make a real "preview" checkbox?

Hello Gustavo,
I've been using (or seen using) preview in a couple of ways:
1. Nesting when possible adj.layers into Groups and toggling their visibility and/or using smart filters on smart objects;
2. Adding, and switching from, history states. Which is handy because you don't toggle only between original and "filtered", but if the UI of your script permits it, between original, "filtered with settings #1", "filtered with settings #2", etc. giving to users the extra feature of comparison.
An option similar to #2 (that I've adopted when the processing is particularly elaborate) is to duplicate the original doc, work on it and paste back the result as a new layer. You can use the same strategy of multiple settings previews there too, but without the need to resort to snapshots.
I've been working for a while on an embedded preview (in the ScriptUI window) but never found a robust workflow for it.
Cheers
Davide Barranca
www.davidebarranca.com

Validating the htmlb inputfield using javascript

Hi,
I am trying to validate the htmlb inputfiels using the javascript,i want to get the value entered iin this inputfield in the javascript in order to validate
plz help me on how do i get the value of the inputfield in the script.
Thanks
Ajay

Hi
   please check the below example if it helps you
<script language='JavaScript'>
      function validateInputField() {
          var funcName = htmlb_formid+"_getHtmlbElementId";
          func = window[funcName];
          var inputfield = eval(func("xyzinputfield"));
          var inputFieldValue = inputfield.getValue();
          input = inputFieldValue.toLowerCase();
          if ( input.checkforsomecondition ) {
                       true perform some action
          else { false display some message
                    alert( "please......... give some message upon failure " ); }
</script>
use some hbj code similar to this
<tr><td width = 40%>
<hbj:inputField
           id="xyzinputfield"
           type="string"
           maxlength="100"
           value="Your name here"
           jsObjectNeeded="true"
/>
<hbj:button
           id="exbutton"
           value="Your name here"
           OnClientclick="validateInputField()"
/>
regards
jagdesh
Message was edited by: jagdeshwar Manipatruni

Checkbox with javascript unexpectedly unchecks other checkboxs

Hi,
I have a checkbox called applicant_isemailaddress which has onchange javascript
if (this.rawValue) {Page1.doYouEmail.presence = "visible";Page1.applicant_allEmailAddresses.presence = "visible";}else {Page1.doYouEmail.presence = "hidden";Page1.applicant_allEmailAddresses.presence = "hidden";};
when checkbox applicant_isemailaddress goes to the "on" state, then two other checkboxs on the page get unchecked.
they are called applicant_isMaleSex and applicant_isFemaleSex, I've tried changing the names to no benefit.
removing the above javascript fixes the behaviour
whats the trick??
tia.
Brian

its possible I am a newbie.
I put the whole page in the masterpage page1.
moving it to page1 as a page, not a masterpage, it works well.
thanks for comment, it did make me think further what was I doing wrong.

Checkbox and javascript onClick

I have defined an sql region with the following query:
SELECT HTMLDB_ITEM.CHECKBOX(1,serviceid) " ",
servicedescription
FROM service
where coid = :P1_COID
ORDER BY 2
Although I read a few threads and Howtos about Javascript I didn't achieve my goal to redirect (submit) the page to itself everytime the checkbox is changed. I tried to manage this by setting
onClick="javascript:doSubmit('Submitted');"
in the element attribute of the serviceid column but with no success.
Besides this I would like to analyze which checkbox (service) is checked. According to the selected services different regions should be shown/hidden on the page. May be someone could point me to the right direction.
Thanks Tobias

I solved it by myself...
Tobias

Access HTMLB controll in Javascript

Hi,
I am tring to access an HTMLB controll (InputField) from JavaScript, but having some problems...
I have created a DynPage and created an InputField: InputField inField = new InputField("inField");
Now, in the javascripts I am trying to access this InputField text with:
var txt = document.form.inField.value
but it does not work... I get a JavaScript error.
Any suggestion how to access the InputField from the JS? maybe with getElementByid?
Thanks in advance,
Aviad

Hi Aviad,
Htmlb controls are not a direct reprsentation of html controls. The way to get hold of them is by following lines.
function validateField()
//htmlb_formid : this is automatically generated
//the following lines will get you the javascript function
//name to call to get hold of your input field
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
//The funtion is called with id of the input field
//which returns the htmlb control object
var inputfield = eval(func("fname_input"));
//this will get you the value of inputfield
var inputString = inputfield.getValue().toString();
<b>Note: Make sure you set jsObjectNeeded = true for the htmlb control.</b>
PS: Please consider rewarding points for helpful answer. thank you.
Message was edited by: Prakash Singh

Htmlb Checkbox

Hello,
I've got a java object that is dynamically creating checkbox in the context of a JSP page :
// val is a specific String
Checkbox cb = new Checkbox(val.substring(1));
cb.setChecked("X".equals(val.substring(0, 1)));
cb.setEnabled(true);
cb.render(rendererContext);
In the same page i have a button that is linked to a function in the Iview (using onClick Event). In this function, i can get back the checkbox. However their values stay as they were set during initialisation, and never change, whatever may be their value in the html page (ie checked or not checked)
Checkbox cb = (Checkbox) getComponentByName(member.getId());
// cb.checked is alway false
In short, i can change the apparent value of a checkbox, but the value of the underlying checkbox is not changed.
I would perfer not to have any event on the checkbox, since user have qite a set to use, and having to pause after each click to allow for the server to response slow them quite a bit.
Does any one have a hint on the reason, or a solution?
regards
Guillaume

In principle, at the end of the day, everything in the browser is HTML. And HTML inputfields that are disabled are not returned to the server.
The technique that we use, is just to render the value a second time using a <input type=hidden> sequence. But of course, then you *must* know that your field you are interested in, is disabled, so that the value will only be returned once. This you can catch by looking at the customization data on the server, or by using JavaScript and then creating the hidden inputfields dynamically.
Personally: I think all of the above is a hack. If you are so dependent on the data, just use a shared model class, and always read the newest values from there.

Execute Apply in checkbox in Javascript

Good day,
I have a WAD template that has an Analysis Item, a checkbox and a button. When the button is clicked an Javascript is executed that checks if any of the checkboxes are checked, if none are checked then all are then checked via the Javascript, the only problem I now have is how do I simulate the executing of the apply button in the Javascript function.
Regards
Lucien
Edited by: Lucien Barnes on Sep 18, 2008 7:10 AM
What I need is the function that is executed when the button is clicked i.e. what is function the is executed by OnClick

Good day,
Solved the problem
I used the following code.
// Get the apply button
var button_checkboxes = document.all(web_item_checkbox_group + "_BIBtnCBG");
// Simulate click.
button_checkboxes.click();

Preselect Htmlb Radiobutton using javascript

Hi Experts,
when I click on a button, i want to preselect a radiobutton using javascript.
I am using below code to get the instance of the radiobutton in the javascript, but I am unable to select the radiobutton.
var theRadio = eval(func(grpId + htmlb_radiobuttonmodifier.substring(3,7)+ "1"));
Thanks in advance

Hi,
Try alerting "(theRadio.type)".
If you are getting the proper checkbox instance then the alert should display "checkbox". If that much is working then checking the checkbox is as simple as
var theRadio = eval(func(grpId + htmlb_radiobuttonmodifier.substring(3,7)+ "1"));
if(theRadio)
theRadio.checked = true
By the way what does the function "func" do?
Regards,
Satyajit

Htmlb:tableViewColumn and JavaScript Link

Hi All,
I'm developing an HTMLB table the first column of which is supposed to be a hyperlink with custom javascript. In other words, when I click on the hyperlink, it's supposed to launch the custom javascript, thus opening a new browser window. This would be similar to the onClientClick property of regular HTMLB links where you can call a custom JS function.
Do you know how this can be accomplished within HTMLB table? Here is my code sample:
<htmlb:tableView id="list"
table="<%=list%>"
encode='TRUE'
headerVisible='FALSE'
design='STANDARD'
footerVisible='<%=listinc_footerVisible%>'
visibleRowCount='<%=listinc_visibleRowCount%>'
rowCount='<%=listinc_lines%>'
width='<%=width%>'
sort          = "SERVER"
keyColumn     = "ID"
>
<htmlb:tableViewColumns>
<htmlb:tableViewColumn columnName = "ID"
                       title       = "<%=model->get_textpool_text( 'I28' )%>"
                       encode      = "TRUE"
                       wrapping    = "FALSE"
                       sort        = "TRUE"
                       preSelectedSortDirection = "DESCENDING"
                       type        = 'Link'
                       linkColumnKey   = "tableviewlink"
                       linkClickTarget = "_servicerequest3"
                       >
</htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName = "SHORTTEXT"
                       title       = "<%=model->get_textpool_text( 'I22' )%>"
                       wrapping    = "TRUE"
                       sort        = "TRUE"
                       >
</htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName = "RQDAT00"
                       title       = "<%=model->get_textpool_text( 'I52' )%>"
                       wrapping    = "TRUE"
                       sort        = "TRUE"
                       >
</htmlb:tableViewColumn>
</htmlb:tableViewColumns>
</htmlb:tableView>
The first column "ID" is from where the custom JS is supposed to be launched.
Thanks!
Roman D.

hi,
do it like this for your first column.
<htmlb:tableViewColumns>
<htmlb:tableViewColumn
columnName = "ID"
title       = "<%=model->get_textpool_text( 'I28' )%>"                            type        = 'USER'
>
<htmlb:link id            = "ID"
                  onClientClick = "your_JS"
                  text          = "your_link_text" >
      </htmlb:link>
</htmlb:tableViewColumn>
remember this will launch same javascript for each row.
if you want to change dynamically for every row then you have to use tableviewiterator to render every row. and change JS accordingly for each row.
check out weblog for tableview iterator
/people/brian.mckellar/blog/2003/10/31/bsp-programming-htmlb-tableview-iterator
regards.

Refresh HTMLB checkbox by JavaScript

Similar Messages

Maybe you are looking for