jQuery if input field has value, add class

Question

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: JS Fiddle and snippet below.

 $('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('<input type="phone" name="phone" /><div class="label-text">Phone</div>').show('600'); } else if (value === 'Email') { $('#contact-method').html('<input type="email" name="email" /><div class="label-text">Email</div>').show('600'); } }); 

 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); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form class="form" method="post" action=""> <label> <input type="text" name="name" /> <div class="label-text">Name</div> </label> <br /> <label> <input type="text" name="message" /> <div class="label-text">Message</div> </label> <br /> <p>How would you prefer to be contacted?</p> <label> <input class="contact" type="radio" name="contact" value="Email" /> Email <input class="contact" type="radio" name="contact" value="Phone" /> Phone </label> <br /> <label id="contact-method"> </label> <br /> <br /> <button>Submit</button> </form> </div> 

Answer 1

The idea. Since you added element dynamically, you need to add blur event to them after the element is created. Wrap your blur event into a function, and call it on page load and also each time after you update the input element.

 function initInputBlur() { $('input').on('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('<input type="phone" name="phone" /><div class="label-text">Phone</div>').show('600'); } else if (value === 'Email') { $('#contact-method').html('<input type="email" name="email" /><div class="label-text">Email</div>').show('600'); } initInputBlur(); }); //init initInputBlur(); 

 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); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form class="form" method="post" action=""> <label> <input type="text" name="name" /> <div class="label-text">Name</div> </label> <br /> <label> <input type="text" name="message" /> <div class="label-text">Message</div> </label> <br /> <p>How would you prefer to be contacted?</p> <label> <input class="contact" type="radio" name="contact" value="Email" /> Email <input class="contact" type="radio" name="contact" value="Phone" /> Phone </label> <br /> <label id="contact-method"> </label> <br /> <br /> <button>Submit</button> </form> </div> 

Answer 2

Since you change $('#contact-method').html every time, use

$(document).on('blur', 'input', function(event) {

instead of

$('input').blur(function(event) {

Answer 3

You can add the phone and email elements in hidden divs and show them accordingly:

<p>How would you prefer to be contacted?</p>
<label>
                            <input class="contact" type="radio"  name="contact" value="Email" /> Email
                            <input class="contact" type="radio" name="contact" value="Phone" /> Phone
                        </label>

<br />
<br />
<label>
<div id="phone" class="hidden">
<input type="phone" name="phone" /><div class="label-text">Phone</div>
</div>
</label>
<label>
<div id="email" class="hidden">
<input type="email" name="email" /><div class="label-text">Email</div>
</div>
</label>

Then in the javascript change it to:

$('input:radio[name=contact]').on('click', function(e) {
  var value = $('input:radio[name=contact]:checked').val();
  if (value === 'Phone') {
    $('#phone').removeClass("hidden");
    $('#email').addClass("hidden");
  } else if (value === 'Email') {
    $('#phone').addClass("hidden");
    $('#email').removeClass("hidden");
  }
});