Question

I’m trying to add an image after a button is clicked. However, I can’t seem to get the attribute of an image to show a different .png file. Basically if the text is blank then show a green check else show a red icon. I want to validate text then validate the expression to be in an email format. But for now I can’t seem to get the image to change when a text box is null.

Here is what I’m loading at the beginning of the page:

<script type="text/javascript">
  $(document).ready(function () {
      $('#imgEmail').hide();
  });
</script>

Here is my logic after the button is clicked:

<script type="text/javascript">
  function validateText() {

      if (!$("#tbEmail").val()) {
          $('#imgEmail').attr('src', '../Images/Red-Error-Icon.png');
      } else {              
          $('#imgEmail').attr('src', '../Images/Green-Check-Icon.png');        
      }
  }
</script>

Here is the HTML for the texbox, image and the button:

<asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>

<img id="imgEmail" alt="">

<asp:Button ID="btnSignUp" runat="server" OnClientClick="validateText()"/>

Thanks for any help.

Answer 1

Don’t you also need to show this image?

$('#imgEmail').show();