CODEWITHSUNDEEP
jquerycsswordpresswoocommerce
Mathias Beck
Mathias Beck

Reputation: 128

Float labels doesn't work when a value is pre-defined

I am having some issues with some jQuery, I am using for float labels. It works fine, but not when a value is pre-defined on page load, which it is often in WooCommerce, if a user has name and address entered in the system, it doesn't work.

Is it possible to modify the code, to check for any value, and not only check if a value is being entered?

$(document).ready(function() {
  var $input = $('.woocommerce form .form-row input.input-text');

  $input.focusout(function() {
    if ($(this).val()) {
      $(this).addClass('input-focus');
      $(this).next('.woocommerce form .form-row label').addClass('input-focus-label');
    } else {
      $(this).removeClass('input-focus');
      $(this).next('.woocommerce form .form-row label').removeClass('input-focus-label');

    }
  });
});
.input-focus-label {
  transform: translateY(-38px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  color: #00bafa;
  font-size: 18px;
}

.input-focus {
  border-color: #00bafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
  <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="Name" autocomplete="given-name">
  <label for="billing_first_name" class="">Name <abbr class="required">*</abbr>
    </label>
</p>

Upvotes: 1

Views: 967

Answers (1)

Makarand Patil
Makarand Patil

Reputation: 1001

Assuming you are getting elements in $input variable using $('.woocommerce form .form-row input.input-text'); selector, you should loop through the elements and check if value is present or not to add the respective class to it. focusout() event does is just registred and not call if you haven't focus on the input. this is the reason if there is already value present it is not executed.

Add below loop after $input selection to add class to the lable if value is already present.

$input.each(function(i, el) {
    if ($(el).val()) {
      $(el).addClass('input-focus');
      $(el).next('.woocommerce form .form-row label').addClass('input-focus-label');
    }
  });

Check the below snippet where i have created the HTML as per the selection and added the loop.Not clear whether this is what you needed

$(document).ready(function() {
  var $input = $('.woocommerce form .form-row input.input-text');
  $input.each(function(i, el) {
    if ($(el).val()) {
      $(el).addClass('input-focus');
      $(el).next('.woocommerce form .form-row label').addClass('input-focus-label');
    }
  });
  $input.focusout(function() {
    if ($(this).val()) {
      $(this).addClass('input-focus');
      $(this).next('.woocommerce form .form-row label').addClass('input-focus-label');
    } else {
      $(this).removeClass('input-focus');
      $(this).next('.woocommerce form .form-row label').removeClass('input-focus-label');

    }
  });
});
.input-focus-label {
  transform: translateY(-38px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  color: #00bafa;
  font-size: 18px;
}

.input-focus {
  border-color: #00bafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='woocommerce'>
  <form>
    <div class='form-row'>
      <input type='text' class='input-text' value='aaa'>
      <label>Value Present</label>
    </div>
    <div class='form-row'>
      <input type='text' class='input-text'>
      <label>No Value</label>
    </div>
  </form>
</div>

Upvotes: 1

Related Questions