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

admin管理员组

文章数量:1024174

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>

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 16, 2017 at 0:01 lesliebleslieb 4511 silver badge77 bronze badges 1

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

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>

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 16, 2017 at 0:01 lesliebleslieb 4511 silver badge77 bronze badges 1

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

本文标签： javascriptjQuery if input field has valueadd classStack Overflow