javascript - jQuery if input field has value, add class

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 es 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=".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>

$('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./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>

Share Improve this question asked Jun 16, 2017 at 0:01 leslieb 451 silver badge7 bronze badges

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 e up with a design solution that doesn't allow labels to overlap the inputs. – Roamer-1888 Commented Jun 16, 2017 at 0:20

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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./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>

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

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

instead of

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery if input field has value, add class - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)