Focal Point
Onclick event for Radio Button

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/8701089641

January 04, 2006, 07:37 AM
<obrienk2>
Onclick event for Radio Button
On my launch page I have two radio butons and one combo box. When radio1 is clicked I want the datasource for the combobox to be tblemployees but it radio2 is clicked I want the datasource for the combobox to be tbladdresses. How do I change the datasource for the combobox on the click event of the radio buttons? Or is there another way of doing this?
January 04, 2006, 08:05 AM
Tony A
Theorectically you could change the various attributes on your SELECT tag as required and then call the IB javascript function that is responsible for the dynamic nature of the HTML.

However, it may be easier for you to have two SELECT tags and use your "onclick" event to make the one you want visible (and the other hidden) using style attributes. To ease your coding and the variable values you pass from your HTML form, you might want to have seperate variable names for each of your SELECT tags and deal with the differences within your called fex.

If I get time then I'll try and knock up an example for you.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 08:42 AM
Tony A
Ok, say your data source combo boxes are -
<SPAN id=ITEM5 style="visibility:visible; BORDER-TOP-WIDTH: 0px; 
  BORDER-LEFT-WIDTH: 0px;   Z-INDEX: 32; LEFT: 30px; BORDER-BOTTOM-WIDTH: 0px; 
  WIDTH: 145px; POSITION: absolute;   TOP: 145px; HEIGHT: 20px; 
  BORDER-RIGHT-WIDTH: 0px" name="text5" elementname="text5" elementtype="text">
Employee Name
</SPAN>
<SELECT id=ITEM6 style="visibility:visible; FONT-WEIGHT: 400; FONT-SIZE: 10pt; 
  Z-INDEX: 42; LEFT: 180px; WIDTH: 220px; FONT-STYLE: normal; 
  FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 145px; HEIGHT: 20px; 
  TEXT-DECORATION: none" name="Employee" elementname="combobox6"
  elementtype="combobox" sourcetype="typeMaster" labelid caption="combobox" 
  operation="NONE" ibiformat datatype="1" addalloption="0" dynalldisplayvalue="ALL"
  inchainindex="-1" chainnumber="-1" cacheruntimedata="0" 
  displayfield numofrecords="-1" datafield="LAST_NAME" 
  datasource="EMPLOYEE.MAS"  datafieldtype="CHAR">
</SELECT>
<SPAN id=ITEM7 style="visibility:hidden; BORDER-TOP-WIDTH: 0px; 
  BORDER-LEFT-WIDTH: 0px; Z-INDEX: 32; LEFT: 30px; BORDER-BOTTOM-WIDTH: 0px; 
  WIDTH: 145px; POSITION: absolute;  TOP: 145px; HEIGHT: 20px; 
  BORDER-RIGHT-WIDTH: 0px" name="text7" elementname="text7" elementtype="text">
Address Line
</SPAN>
<SELECT id=ITEM8 style="visibility:hidden; FONT-WEIGHT: 400; FONT-SIZE: 10pt; 
  Z-INDEX: 42; LEFT: 180px; WIDTH: 220px; FONT-STYLE: normal; 
  FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 145px; HEIGHT: 20px; 
  TEXT-DECORATION: none" name="Address" elementname="combobox8" 
  elementtype="combobox" sourcetype="typeMaster" labelid caption="combobox" 
  operation="NONE" ibiformat datatype="1" addalloption="0" dynalldisplayvalue="ALL" 
  inchainindex="-1" chainnumber="-1" cacheruntimedata="0" 
  displayfield numofrecords="-1" datafield="ADDRESS_LN1" 
  datasource="EMPLOYEE.MAS"  datafieldtype="CHAR">
</SELECT>
then add some JavaScript like this -
<SCRIPT type=text/javascript>
// Show or hide the source
// depending upon the radio button selected
    function showsrce(btn) {
      if (btn==1) {
        showItem = document.getElementById("ITEM5");
        this.showItem.style.visibility = "visible";
        showItem = document.getElementById("ITEM6");
        this.showItem.style.visibility = "visible";
        showItem = document.getElementById("ITEM7");
        this.showItem.style.visibility = "hidden";
        showItem = document.getElementById("ITEM8");
        this.showItem.style.visibility = "hidden";
      } else {
        showItem = document.getElementById("ITEM5");
        this.showItem.style.visibility = "hidden";
        showItem = document.getElementById("ITEM6");
        this.showItem.style.visibility = "hidden";
        showItem = document.getElementById("ITEM7");
        this.showItem.style.visibility = "visible";
        showItem = document.getElementById("ITEM8");
        this.showItem.style.visibility = "visible";
      }
    }
</SCRIPT>
and add your onclick events to your radio buttons -
onclick="showsrce(1);" 
remembering to change the value being passed for the second radio button.

When you click each radio button on the HTML page the JavaScript function will be called with a value. The if statement evaluates the condition that the value (btn) being equal to 1 is true (the double == is correct) and hides the relveant controls accordingly.

Good luck.

T

This message has been edited. Last edited by: Kerry,



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 09:22 AM
<obrienk2>
quote:
elementname="combobox6"

Thank you soo much. I have a question. I need both Comboboxes to be named "Employee" because in my report it is looking for the "employee" parameter. Is that ok? the id names will be different but the names will be the same.
January 04, 2006, 10:08 AM
<obrienk2>
Everything appears to be workining except for my radio button onclick events. When I click on the first radio button it works then when I click on the second radio button. Nothing happens. I checked the value of BTN and it appears to retain the value of 1 regardless of which button i click. I did make sure I changed the second button to onclick=showsrce(2);
January 04, 2006, 10:19 AM
Tony A
Are you sure that you have the double equals sign in the JavaScript IF? This is a required syntax and if there is only one then that would explain the non changing state.

If you want to make sure that the values are being passed then you can add
alert(btn);
immediately after the function line and that will show you the value passed in the onclick event.



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 10:32 AM
<obrienk2>
Ok I do have the if statement like this (btn==1)

Also I did the alert and its passing only the same value on each click even though i am clicking a different radio button. Maybe I have my radio buttons set up wrong.

I have one radio1 then two radio1_0 and radio1_1 inputs. I put the onclick events under the radio1_0 and radio1_2.
January 04, 2006, 10:56 AM
Tony A
The alert has found where the problem lies - in that the same value is being passed. So you need to look closely at the code for them.

Here is some sample radio button code that I used to test this -
<SPAN id=ITEM2 style="FONT-WEIGHT: 400; FONT-SIZE: 10pt; Z-INDEX: 67; 
  LEFT: 180px; WIDTH: 210px; FONT-STYLE: normal; FONT-FAMILY: MS Sans Serif; 
  POSITION: absolute; TOP: 80px; HEIGHT: 20px;  
  TEXT-DECORATION: none" name="radio2" elementname="radio2" elementtype="radio" 
  sourcetype="typeMaster" labelid caption="radio" columns="3" rows="-1" 
  operation="NONE" ibiformat datatype="0" addalloption="0" dynalldisplayvalue="ALL"
  inchainindex="-1" chainnumber="-1" cacheruntimedata="0" displayfield
  numofrecords="-1" datafield datasource datafieldtype="CHAR">
  <INPUT id=ITEM2_0 onclick="showsrce(1);" style="LEFT: 0px; WIDTH: 16px; 
  CURSOR: default;   POSITION: absolute; TOP: 0px; HEIGHT: 16px" 
  type=radio value=Employee name="DataSource" checked ="1">
  <LABEL style="LEFT: 19px; POSITION: absolute; TOP: 0px" for="ITEM2_0">
Employee
  </LABEL>
  <INPUT id=ITEM2_1 onclick="showsrce(0);" style="LEFT: 88px; WIDTH: 16px; 
  CURSOR: default; POSITION: absolute; TOP: 0px; HEIGHT: 16px" type=radio 
  value=Address name="DataSource">

  <LABEL style="LEFT: 107px; POSITION: absolute; TOP: 0px" for="ITEM2_1">
Addresses
  </LABEL>
</SPAN>

This message has been edited. Last edited by: Kerry,



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 11:10 AM
<obrienk2>
When you clickon these radio buttons is the value changing for your btn variable. I copied the code and clicked on the buttons and it is just displaying value 0.
January 04, 2006, 11:50 AM
Tony A
Yes, when I click the first radio button it passes a 1 (one) when I click the right hand radio button it passes a 0 (zero).

How about posting just your button code?

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 12:02 PM
Tony A
A good start but I would like to see the radio button tag code.

Off home now but will check tonight.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 04, 2006, 12:19 PM
N.Selph
obrienk2-
I think your syntax is showing up at the top of this post as radio buttons (at least for me).


(Prod: WebFOCUS 7.7.03: Win 2008 & AIX hub/Servlet Mode; sub: AS/400 JDE; mostly Self Serve; DBs: Oracle, JDE, SQLServer; various output formats)
January 04, 2006, 12:28 PM
<obrienk2>
Here is the code for the boxes. Please help. Frowner
<BODY>
<SPAN id=ITEM2 style="FONT-WEIGHT: 400; FONT-SIZE: 10pt; Z-INDEX: 67; 
LEFT: 180px; WIDTH: 210px; FONT-STYLE: normal; FONT-FAMILY: MS Sans Serif; 
POSITION: absolute; TOP: 80px; HEIGHT: 20px; TEXT-DECORATION: none" 
sourcetype="typeMaster" datafieldtype="CHAR" datatype="0" 
datasource operation="NONE" addalloption="0" name="radio2" columns="3" 
datafield displayfield labelid numofrecords="-1" cacheruntimedata="0" 
chainnumber="-1" inchainindex="-1" dynalldisplayvalue="ALL" 
ibiformat rows="-1" caption="radio" elementtype="radio" elementname="radio2">
<INPUT id=ITEM2_0 style="LEFT: 0px; WIDTH: 16px; CURSOR: default; 
POSITION: absolute; TOP: 0px; HEIGHT: 16px" onclick=showsrce(1); 
type=radio CHECKED value=Employee name=DataSource> 
<LABEL style="LEFT: 19px; POSITION: absolute; TOP: 0px" for=ITEM2_0>
Employee 
</LABEL>
<INPUT id=ITEM2_1 style="LEFT: 88px; WIDTH: 16px; CURSOR: default; 
POSITION: absolute; TOP: 0px; HEIGHT: 16px" onclick=showsrce(0); 
type=radio value=Address name=DataSource> 
<LABEL style="LEFT: 107px; POSITION: absolute; TOP: 0px" for=ITEM2_1>
Addresses 
</LABEL>
</SPAN>
<INPUT language=javascript id=button1 style="Z-INDEX: 1; LEFT: 170px; 
WIDTH: 210px; POSITION: absolute; TOP: 170px; HEIGHT: 60px" 
onclick=button1_OnClick(this) tabIndex=1 type=button size=21 
value="Run Report" name=button1 requests_list="1">
   
<SELECT id=combobox2 style="Z-INDEX: 4; LEFT: 130px; VISIBILITY: visible; 
WIDTH: 250px; POSITION: absolute; TOP: 120px" tabIndex=4 size=1 
name=BoardMember sourcetype="typeMaster" datafieldtype="VARCHAR" 
datatype="1" datasource="TBLDISTRICT.mas" operation="NONE" accept="0"
addalloption="1" requiredfield="145163032" datafield="BOARD_MEMBER" 
displayfield="BOARD_MEMBER" labelid="text1">
</SELECT> 
<SPAN id=text2 style="Z-INDEX: 5; LEFT: 420px; WIDTH: 82px; 
POSITION: absolute; TOP: 50px; HEIGHT: 16px" tabIndex=5>
STATUS 
</SPAN>
<SELECT id=combobox3 style="Z-INDEX: 6; LEFT: 400px; WIDTH: 150px; 
POSITION: absolute; TOP: 120px" tabIndex=6 size=1 name=STATUS 
sourcetype="typeMaster" datafieldtype="VARCHAR" datatype="1" 
datasource="TBLSTATUS.mas" operation="NONE" accept="0" addalloption="1"
requiredfield="145163032" datafield="STATUS" displayfield="STATUS" 
labelid="text2">
</SELECT>
       
<SPAN id=text1 style="Z-INDEX: 25; LEFT: 130px; WIDTH: 230px; 
POSITION: absolute; TOP: 10px; HEIGHT: 38px" tabIndex=26>
Select an Option 
</SPAN>
<SELECT id=combobox1 style="Z-INDEX: 26; LEFT: 190px; VISIBILITY: hidden; 
WIDTH: 200px; POSITION: absolute; TOP: 280px" tabIndex=27 name=BoardMember 
datafieldtype="INTEGER" datatype="1" datasource="TBLschool.mas" operation="NONE" 
accept="0" addalloption="1" datafield="SCHOOLID" displayfield="SCHOOLID">
</SELECT> 




This message has been edited. Last edited by: Kerry,
January 04, 2006, 02:00 PM
<obrienk2>
I had to end up using this because it kept looking at the radio button as one button.

function ITEM2_onclick(ctrl) {
if (RADSELECT[0].checked) {
        showItem = document.getElementById("combobox2");
        this.showItem.style.visibility = "visible";
        showItem = document.getElementById("combobox1");
        this.showItem.style.visibility = "hidden";
}
else {
     showItem = document.getElementById("combobox2");
        this.showItem.style.visibility = "hidden";
        showItem = document.getElementById("combobox1");
        this.showItem.style.visibility = "visible";
 }
}



January 04, 2006, 03:52 PM
Tony A
I see your posts have been changed but recalling the one I saw just I left work - I think your problem was how you were using the passed value in your JavaScript.

You had "function ITEM2_onclick(ctrl) {" in your code but then referred to the passed value as "btn" instead of "ctrl".

However, I'm glad you managed to get it working.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10