title: jQuery if input field has value, add class
body: <p>I have a dynamic form, and every time the focus is on a particular field the label text moves above the field and stays there if a value has been entered. This works fine for the Name and Message fields. My problem is the contact option for phone or email. That field appears based on the preferred contact method selected. But when when a value is entered, after that field loses focus the text comes back down and overlaps what the user entered. I have tried a bunch of different things as far as selecting elements but can't get those fields to cooperate. I haven't been able to find anything for this specific problem. Here is a Fiddle of the form: <a href="https://jsfiddle.net/itsthecheat/uejzxg7s/" rel="nofollow noreferrer">JS Fiddle</a> and snippet below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('input').blur(function(event) {
    var inputValue = this.value;
    if (inputValue) {
      this.classList.add('value-exists');
    } else {
      this.classList.remove('value-exists');
    }
  });
  
  
  $('input:radio[name=contact]').on('click', function(e) {
    var value = $('input:radio[name=contact]:checked').val();
    if (value === 'Phone') {
      $('#contact-method').html('&lt;input type="phone" name="phone" /&gt;&lt;div class="label-text"&gt;Phone&lt;/div&gt;').show('600');
  
    } else if (value === 'Email') {
      $('#contact-method').html('&lt;input type="email" name="email" /&gt;&lt;div class="label-text"&gt;Email&lt;/div&gt;').show('600');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    font-family: 'PT Sans', sans-serif;
  }
  
  label {
    display: block;
    padding-top: 10px;
  }
  
  label .label-text {
    cursor: text;
    -moz-transform: translateY(-22px);
    -ms-transform: translateY(-22px);
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
    transition: all 0.3s;
  }
  
  label input {
    background-color: transparent;
    border: 0;
    border-bottom: solid #777 2px;
    transition: all .03s;
  }
  
  label input:focus+.label-text {
    color: 'black';
    text-transform: uppercase;
    transform: translateY(-55px);
  }
  
  label input.value-exists+.label-text {
    color: 'black';
    text-transform: uppercase;
    transform: translateY(-55px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;form class="form" method="post" action=""&gt;
      &lt;label&gt;
                                  &lt;input type="text" name="name" /&gt;
                                  &lt;div class="label-text"&gt;Name&lt;/div&gt;
  
                              &lt;/label&gt;
      &lt;br /&gt;
      &lt;label&gt;
                                  &lt;input type="text" name="message" /&gt;
                                  &lt;div class="label-text"&gt;Message&lt;/div&gt;
                              &lt;/label&gt;
  
      &lt;br /&gt;
      &lt;p&gt;How would you prefer to be contacted?&lt;/p&gt;
      &lt;label&gt;
                                  &lt;input class="contact" type="radio"  name="contact" value="Email" /&gt; Email
                                  &lt;input class="contact" type="radio" name="contact" value="Phone" /&gt; Phone
                              &lt;/label&gt;
  
      &lt;br /&gt;
      &lt;label id="contact-method"&gt;
                              &lt;/label&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>