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,

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.)

Thank you Squatch. I tried the code you provided but still its not highlighting the button when selected.

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.

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.

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;
            }

        }
    }
}

Thank you very much Squatch. Its not reading the button1 values which in my case should be 'radio1_LABEL_0' and 'radio1_LABEL_1'