title: display/hide asterisk based on text input
body: <p>I have a PHP form and I'm trying to display asterisks after the input boxes <code>txt1</code>, <code>txt1</code>, and <code>txt3</code> if they are empty. It shows the asterisks if empty after hitting the submit button but I want to be able to remove the asterisk after hitting the button if the field has already been filled. The code below doesn't seem to do that last bit. </p>
  
  <pre><code>//variable declaration
  var a = $("#txt1").val(),
          b = $('#txt2').val(),
          c = $("#txt3").val();
  function asterisks() {
      if (a == ""){
          document.getElementById("err_txt1").innerHTML = "*";
      }
      else if (a != ""){
          document.getElementById("err_txt1").innerHTML = "";
      }
      if (b == ""){
          document.getElementById("err_txt2").innerHTML = "*";
      }
      else if (b != ""){
          document.getElementById("err_txt2").innerHTML = "";
      }
      if (c == ""){
          document.getElementById("err_txt3").innerHTML = "*";
      }
      else if (c != ""){
          document.getElementById("err_txt3").innerHTML = "";
      }
  }
  </code></pre>
  
  <p>What am I missing? Is there a better approach to this? Is it possible to remove the asterisk as soon as the fields get filled without having to press the button? If yes, how?</p>
  
  <p><strong>Sample field HTML</strong></p>
  
  <pre><code>&lt;style&gt;
      .err {
          color: #FF0000;
      }
  &lt;/style&gt;
  
  &lt;td&gt;&lt;h3&gt;Subject&lt;/h3&gt;&lt;/td&gt;
  &lt;td&gt;&lt;b id="err_txt1" class="err"&gt;&lt;/b&gt;&lt;input type="text" id="txt1" name="txt1" placeholder="Subject" &gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Submit form</strong></p>
  
  <pre><code>$("#form1").submit(function(e){
      e.preventDefault();
      asterisks();
  }
  </code></pre>