Focal Point
[SOLVED]Webfocus 8.1 HTML page help needed

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

June 17, 2016, 10:15 AM
MeM
[SOLVED]Webfocus 8.1 HTML page help needed
Hi,

I'm trying to add a situation to the html page. If certain values in the dropdown is selected then checkbox A should appear otherwise checkbox B should appear. Can anybody please suggest, how this can be done?

Thanks in advance.

This message has been edited. Last edited by: <Emily McAllister>,


WebFOCUS 8.2.02
Windows, All Outputs
June 17, 2016, 11:23 AM
Squatch
In my example, the dropdown has a unique identifier of "combobox1". Next to it are two checkboxes, identified as "checkbox1" and "checkbox2". Both checkboxes occupy the same position on the HTML page (i.e., they are on top of each other).

Here are the choices in my dropdown:

Apple
Lemon
Lettuce
Pear
Radish
Tomato

Three of these are fruits, and three are vegetables (Okay, okay, I'm going to make "Tomato" a vegetable, even though it is considered a fruit). When a fruit is selected, checkbox1 (A) shows "Deliver Fruit?". When a vegetable is selected, checkbox2 (B) shows "Deliver Vegetable?".

Here is the embedded JavaScript code to show the correct checkbox for the dropdown:

// After HTML page loads, show the correct checkbox
function combobox1_ononafterload(ctrl) {
    show_checkbox();
}

// When dropdown choice has been changed, show the correct checkbox
function combobox1_onchange(event) {
    show_checkbox();
}

// Code to determine which checkbox should appear
function show_checkbox() {
    document.getElementById("checkbox1").style.display = "none";
    document.getElementById("checkbox2").style.display = "none";

    var a = document.getElementById("combobox1");
    var choice = a.options[a.selectedIndex].value;

    if ( choice == "Apple" ||
         choice == "Lemon" ||
         choice == "Pear" ) {
            document.getElementById("checkbox1").style.display = "block";
         }
    else {
            document.getElementById("checkbox2").style.display = "block";
    }
}



App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
June 17, 2016, 11:36 AM
MeM
Thank you Squatch. Is there any way, I can just do without writing the code?
June 17, 2016, 11:47 AM
Squatch
quote:
Originally posted by MeM:
Thank you Squatch. Is there any way, I can just do without writing the code?

I can't think of a way right now, maybe someone else knows how.

I assume you are using App Studio because you are on WebFOCUS 8.1. There is an Embedded JavaScript/CSS tab at the bottom of App Studio. As long as your controls are named the same as in my example, you should be able to paste the code in that place after any code that is already there (And making any logic changes needed to match your needs -- your dropdown will have different values, of course).

If the names of your controls are different, just replace all references to combobox1, checkbox1 and checkbox2 to whatever the names of your controls are.


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
June 17, 2016, 11:50 AM
MartinY
Except if someone know something really hot about GUI, you won't have choice to code MeM.

This is where programmers start their job Music


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
June 17, 2016, 12:00 PM
MeM
Thank you Squatch and Martin.
June 18, 2016, 10:24 AM
Ram Prasad E
With GUI - Tasks and Animation, you can control visibility of elements with onchange event of list box.

Since you need to control based on value selected, only option is to use javascript code.

Thanks,
Ram


WebFOCUS 8.1.05
Windows
http://ibiwebfocus.wordpress.com
https://www.facebook.com/groups/ibi.webfocus/
June 20, 2016, 07:52 AM
MeM
Thank you Ram.


WebFOCUS 8.2.02
Windows, All Outputs