We help IT Professionals succeed at work.

Help with changing background color of textbox when clicking on checkbox from another control

593 Views
Last Modified: 2012-02-09
Hello,

I am trying to change the backgroundcolor of C1SDecativation when I click on the checkboxes of C1SDeacrivationA, below is my code, how do i modify my javascript code
to achieve this.

<script type="text/javascript" id="ComponentOneClientScript2">
     function C1SDeactivationA_OnClientDropDownCollapsed() {
         //
         // Put your code here.
         var combo = $find('C1SDeactivationA');
         $("#C1SDeactivation").val(combo.get_text());
     };
</script>

 <script type="text/javascript" id="Script1">
     function C1SDeactivationA_OnClientSelectedIndexChanged() {
         //
         // Put your code here.
         var combo = $find('C1SDeactivationA');
         $("#C1SDeactivation").val(combo.get_text());
     };
</script>
    <script type="text/javascript" id="ComponentOneClientScript1">
        function C1SDeactivationA_OnClientBlur() {
            //
            // Put your code here.
            var combo = $find('C1SDeactivationA');
            $("#C1SDeactivation").val(combo.get_text());
        };
</script>


<td bgcolor="Silver" class="style986">
                     <asp:TextBox ID="C1SDeactivation" runat="server" Height="30px" ReadOnly="True"
                         TextMode="MultiLine" Width="180px" BackColor="#FFFF99" AutoPostBack="True"></asp:TextBox>
                    <cc1:C1ComboBox ID="C1SDeactivationA" runat="server"
                         OpenDropDownOnLoad="True"
                         SelectionMode="Multiple" Width="180px" onclientblur="C1SDeactivationA_OnClientBlur"
                         onclientdropdowncollapsed="C1SDeactivationA_OnClientDropDownCollapsed"
                         onselectedindexchanged="C1SDeactivationA_SelectedIndexChanged"
                         OnClientSelectedIndexChanged ="C1SDeactivationA_OnClientSelectedIndexChanged"
                         AccessKey="" ToolTip="" HideDropDownListOnBlur="False" AutoPostBack="False"
                         DropDownPositioningMode="Absolute">
                         <ItemsTemplate>
                             <asp:CheckBox ID="SDeactivation" runat="server" />
                             <%# DataBinder.Eval(Container.DataItem, "SDeactivation")%>
                         </ItemsTemplate>
                     </cc1:C1ComboBox>
                      </td>
Comment
Watch Question

Alfredo Luis Torres SerranoASP .Net Developer

Commented:
javascript:

backgroundSet(){
document.getElementById("<%= textBox.ClientID %>").style.background = "red";
}

Author

Commented:
Hi,

What part of my ASPX file do I include this code?

Author

Commented:
Should it go inside the code below?

<script type="text/javascript" id="Script1">
     function C1SDeactivationA_OnClientSelectedIndexChanged() {
         //
         // Put your code here.
         var combo = $find('C1SDeactivationA');
         $("#C1SDeactivation").val(combo.get_text());
     };
</script>

Thanks.
Alfredo Luis Torres SerranoASP .Net Developer

Commented:
<script type="text/javascript" id="Script1">
     function C1SDeactivationA_OnClientSelectedIndexChanged() {
         //
         // Put your code here.
         var combo = $find('C1SDeactivationA');
         $("#C1SDeactivation").val(combo.get_text());
         document.getElementById("<%= textBox.ClientID %>").style.background = "red";
     };
</script>

Author

Commented:
Thanks, will get back to you tomorrow.
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi,

Do you mean the following below? Not sure why you have "In javascript" between both code. I Will try it in the office tomorrow.
Thanks.


                         <ItemsTemplate>
                             <asp:CheckBox ID="SDeactivation" runat="server" onChange="setColor();"  />
                             <%# DataBinder.Eval(Container.DataItem, "SDeactivation")%>
                         </ItemsTemplate>
                     </cc1:C1ComboBox>

 <script type="text/javascript" id="Setcolor">
function setColor(){
  document.getElementById('C1SDeactivation').style.backgroundColor='Red';
}
</script>

 Or I don't need the Script tag between the setColor method?

Author

Commented:
Hello,

It works but I have another problem, the initial background color is yellow, and after running a searchch, my C1SDeactivation contains a value (i.e M555), and when click on the checkboxes of C1SDeactivationA the background changes to red as desired, but is there a way to modify the code to set the background color back to yellow and the text back to M555 (Initial value) if the user decides to uncheck all the checkboxes that he/she previously checked?

Thanks

Author

Commented:
Hello again,

I tried the code below to also change the color of text but it doesn't work, what is the proper syntax?

document.getElementById("<%= C1SDeactivation.ClientID %>").style.text = "yellow";



Also, I noticed Setcolor() is not executed because my background color is Green and not Red, I think we only need to use C1SDeactivationA_OnClientSelectedIndexChanged().

<script type="text/javascript" id="Script11">
function setColor(){
    document.getElementById('C1SDeactivation').style.backgroundColor = 'Red';
  }
</script>
 <script type="text/javascript" id="Script1">
     function C1SDeactivationA_OnClientSelectedIndexChanged() {
         //
         // Put your code here.
         var combo = $find('C1SDeactivationA');
         $("#C1SDeactivation").val(combo.get_text());
         document.getElementById("<%= C1SDeactivation.ClientID %>").style.background = "green";
         document.getElementById("<%= C1SDeactivation.ClientID %>").style.text = "yellow";
     };
</script>

Thanks,

Victor
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2014

Commented:
Now you have confused me. You said it works and you said it does not work. You said you want to change color based on checkbox and you are talking about selectedindexchange(dropdown).

Author

Commented:
Sorry about that, It works, I have another issue which i will post separately.

Thanks,

Victor
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.