TextBox Color Changes using Javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • stormcandi
    New Member
    • Apr 2007
    • 12

    TextBox Color Changes using Javascript

    Hello,
    I know this question has been asked everywhere but I cannot find a solution that will help me. I hope someone here has some ideas.

    I have 9 TextBoxes in a Repeater Control. A user can edit dates in these textboxes. If the user changes the date, I want to dynamically change the color of the background of the textbox. When the data is saved I will set the textboxes back to it's original background(I can do this in the code-behind)
    Right now I can get it to change but I have to do a postback in order to do it on the TextChanged Event of the TextBox. This page has 14 rows with 9 textboxes in each so postbacks are tedious to the user after 3 of them.
    Can anyone help me accomplish this in Javascript?

    Thanks in advance!
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Use the text box's onchange event to change the color.

    Comment

    • stormcandi
      New Member
      • Apr 2007
      • 12

      #3
      Originally posted by acoder
      Use the text box's onchange event to change the color.
      I have tried using the onTextChanged Event but no avail unless the page posts back which I do not want it to do.

      This is in my code-behind:
      Code:
        
       foreach (RepeaterItem item in rptrShots.Items)
       {
            TextBox txt1 = (TextBox)item.FindControl("txt1");
             txt1.Attributes["onTextChanged"] = "ChgColor('" + txt1.UniqueID + "');";
       }
      This is in the mark-up:
      Code:
      <script language="javascript" type="text/javascript"> 
      function ChgColor(sender)
      {
          sender.style.backgroundColor = '#CC3300';
      }
      </script>

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Can you not use normal JavaScript like, e.g.
        [HTML]<input type="text" onchange="chgCo lor(this);">[/HTML]

        Comment

        • stormcandi
          New Member
          • Apr 2007
          • 12

          #5
          Originally posted by acoder
          Can you not use normal JavaScript like, e.g.
          [HTML]<input type="text" onchange="chgCo lor(this);">[/HTML]
          No I get an error when I try to do it that way.
          I get these types of errors:
          Invalid expression term ')

          This is what the markup for the textbox looks like:
          [HTML]<asp:TextBox ID="txt1" runat="server" Text = '<%# Bind("Dose1") %>' MaxLength = "10" Width = "90%" OnTextChanged= "chgColor() ;"/>[/HTML]

          Comment

          • stormcandi
            New Member
            • Apr 2007
            • 12

            #6
            Originally posted by stormcandi
            No I get an error when I try to do it that way.
            I get these types of errors:
            Invalid expression term ')

            This is what the markup for the textbox looks like:
            [HTML]<asp:TextBox ID="txt1" runat="server" Text = '<%# Bind("Dose1") %>' MaxLength = "10" Width = "90%" OnTextChanged= "chgColor() ;"/>[/HTML]
            Does anyone have any ideas on how to get this to work?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              How does that turn out on the client-side?

              Comment

              Working...