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>

This is a design issue, more than a programming issue. If the "email" and "phone" inputs are to share the same real-estate on the page, then you need to come up with a design solution that doesn't allow labels to overlap the inputs. — Roamer-1888
– Roamer-1888, Commented Jun 16, 2017 at 0:20

Dalin Huang · Accepted Answer · 2017-06-16 00:12:51Z

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>

Worked perfectly, and this was close to something I had tried but couldn't quite implement it correctly (still learning!). Thanks again!

Kosh · Accepted Answer · 2017-06-16 00:25:50Z

1

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

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

instead of

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

answered Jun 16, 2017 at 0:25

Kosh

18.6k2 gold badges24 silver badges39 bronze badges

Comments

Simon · Accepted Answer · 2017-06-16 00:30:08Z

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

Collectives™ on Stack Overflow

jQuery if input field has value, add class

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related