Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Closed] HTML page - Radio Button

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[Closed] HTML page - Radio Button
 Login/Join
 
Gold member
posted
Hi,

I have created a radio button with Value 1 and Value 2 on the html page and have changed its type to push. Now, I want when I select the Value 1 the color of the push button should change to a different color and same is the case with Value 2. Basically, I want to highlight the button when I select it.

Can anybody please guide me how can I do this?

Thank you in advance.

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


WebFOCUS 8.2.02
Windows, All Outputs
 
Posts: 95 | Registered: May 16, 2016Report This Post
Master
posted Hide Post
Assuming the radio control has a unique identifier "radio1", and the push button is "button1":

function radio1_ononafterload(ctrl) {
    selection_checked(); 
}

function radio1_onchange() {
    setTimeout(
        function() {
            selection_checked()
        },
            150);
}

function selection_checked() {
    var rpt_type = document.getElementById("radio1").getElementsByTagName("input");

    for (var i = 0; i < rpt_type.length; i++) {
        if (rpt_type[i].checked) {
            switch(rpt_type[i].value) {
                case "Value 1":
                    document.getElementById("button1").style.background = "#000000";
                    break;
                case "Value 2":
                    document.getElementById("button1").style.background = "#888888";
                    break;
            }

        }
    }
}

Click on the radio control, then go to the Properties panel. Click the yellow lightning bolt to see the events. Type in "radio1_onchange" for the "Value Changed" event, and type in "radio1_ononafterload" for the "After Load" event.

(The timeout is needed to give the radio control time to display the new radio selection.)


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Gold member
posted Hide Post
Thank you Squatch. I tried the code you provided but still its not highlighting the button when selected.


WebFOCUS 8.2.02
Windows, All Outputs
 
Posts: 95 | Registered: May 16, 2016Report This Post
Master
posted Hide Post
The code works for me. You need to add the "radio1_ononafterload" and "radio1_onchange" functions in the Properties panel as "events" (Yellow lightning bolt).

If your radio control is not "radio1" or your button is not "button1", you will need to change the code to reflect that.

You can make sure that the functions are being called by adding JavaScript alerts, like this:

function radio1_ononafterload(ctrl) {
    alert("radio1_ononafterload function has been called");

    selection_checked(); 
}

function radio1_onchange() {
    alert("radio1_onchange function has been called");

    setTimeout(
        function() {
            selection_checked()
        },
            150);
}

function selection_checked() {
    alert("selection_checked function has been called");

    var rpt_type = document.getElementById("radio1").getElementsByTagName("input");

    for (var i = 0; i < rpt_type.length; i++) {
        if (rpt_type[i].checked) {
            switch(rpt_type[i].value) {
                case "Value 1":
                    document.getElementById("button1").style.background = "#000000";
                    break;
                case "Value 2":
                    document.getElementById("button1").style.background = "#888888";
                    break;
            }

        }
    }
}

If you do not see any alert messages, it means your functions are not being executed.


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Gold member
posted Hide Post
Thank you Squatch. I'm getting all the three alerts but still button is not getting highlighted with different color on selection. Since its running for you, let me figure it out.

Thank you once again for your help.


WebFOCUS 8.2.02
Windows, All Outputs
 
Posts: 95 | Registered: May 16, 2016Report This Post
Master
posted Hide Post
Try putting more alerts in the "selection_checked" function:

function selection_checked() {
    alert("selection_checked function has been called");

    var rpt_type = document.getElementById("radio1").getElementsByTagName("input");

    for (var i = 0; i < rpt_type.length; i++) {
        if (rpt_type[i].checked) {
            alert("Got here");

            switch(rpt_type[i].value) {
                case "Value 1":
                    alert("Value 1");
                    document.getElementById("button1").style.background = "#000000";
                    break;
                case "Value 2":
                    alert("Value 2");
                    document.getElementById("button1").style.background = "#888888";
                    break;
            }

        }
    }
}


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Gold member
posted Hide Post
Thank you very much Squatch. Its not reading the button1 values which in my case should be 'radio1_LABEL_0' and 'radio1_LABEL_1'


WebFOCUS 8.2.02
Windows, All Outputs
 
Posts: 95 | Registered: May 16, 2016Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Closed] HTML page - Radio Button

Copyright © 1996-2020 Information Builders