Use JS to detect when textbox has a value and a radiobuttonlist has a selected index

Question

I have a GridView whose second to last column contains a Textbox (which is filled by a jQueryUI DatePicker widget) and a RadioButtonList. Also, the last column has an Image of a check (similar to stackoverflow's "answered" and "unanswered" check.)

What I need is to be able to detect, preferably using Javascript, when the user has changed the value of the textbox to something (a date in my case) and has selected a radio button and then change the image source from an empty checkmark to a colored checkmark (once again, similar to the answer check in stackoverflow.) Also, if the user deletes all text from the textbox, I need to change the image source back to the empty checkmark. Oh, and I would also need to changed the Alternate Text of the Image as well.

My Gridview

<asp:GridView ID="gvBlah" runat="server" AutoGenerateColumns="false">
            <Columns>
                ...       
                <asp:TemplateField>
                    <HeaderTemplate> 
                        <asp:Label ID="warrantyDateHeader" Text="Warranty Date" ToolTip="Choose a date..." runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="txtWarrantyDate" runat="server" CssClass="datepicker" />
                        <asp:RadioButtonList ID="rblWarrantyDate" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="0" Text="Start" />
                            <asp:ListItem Value="1" Text="End" />
                        </asp:RadioButtonList>
                    </ItemTemplate>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="imgRowChecked" ImageUrl="~/images/check-empty.png" AlternateText="Not Selected"  runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

UPDATE

This ended up being the best solution, using the answer that was given.

var dateStatus = 0 // global variable
var WarrantyStatus = 0 // global variable
$(".datepicker").change(function () {
    if ($(this).val().length == 0) {
        dateStatus = 0;
        $(".chkSerialNumber").removeClass("check-filled").addClass("check-empty");
    }
    else {
        dateStatus = 1;
        if (WarrantyStatus > 0) {
            $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
        }
    }
});
$(".rbl").change(function () {
    WarrantyStatus = 1;
    if (dateStatus = 1) {
        $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
    }
});

Answer 1

I'm asuming you are not implementing multiple edits inside your gridview. So here is the jQuery code which will test for the length in your date textbox.

I would suggest you to make the image as CSS class something like this:

div.check-empty {
    background: url("/images/check-empty.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

div.checked-green {
    background: url("/images/check-green.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

and provide this inside the gridview as default like this:

<div class="check-empty"></div>

The reason for above is that you can manipulate the image using jQuery dynamically.

So the rest of the code goes like this:

1. For checking the date textbox to contain some value:

   var dateStatus = 0 // global variable
   var WarrantyStatus = 0 // global variable
   
   $('.datepicker').blur(function() 
   {       
      if($(this).val().length == 0)
        dateStatus = 0;
      else
       {
        dateStatus = 1;
        if(WarrantyStatus != 0)
         $(".check-empty").addClass("checked-green");
       }
   
    }
   

2. For checking if user has changed the radio button:

   $("rblWarrantyDate").change(function()
   {
      if ($(this).val() == '1') 
      {
         WarrantyStatus = 1;
         if(dateStatus != 0)
         $(".check-empty").addClass("checked-green");
      }
      else
          WarrantyStatus = 0;
   });