0

I have some simple jQuery working to hide labels for text inputs on focus, keyup and blur if (value !== ''). I am using replacement tokens in my forms to fill in a default value based on the currently logged in user. I need to hide the labels if the default value gets prepopulated. I can't get the right function to hide the labels if a default value populates the form. (I've installed jQuery update to get the .on() function.) Here's the script in my js file:

(function ($, Drupal, window, document, undefined) {
Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {
/*------ Hide labels when user interacts with forms ------*/
    $(".form-item input", context).on({
      focus: function() {
        $(this).prev('label').fadeOut('fast');
      },
      keyup: function() {
        $(this).prev('label').fadeOut('fast');
      },
      blur: function() {
        if($(this).val() !== "") {
          $(this).prev('label').hide('fast');
        } else { 
          $(this).prev('label').fadeIn('fast');
        }
      }
    });
/*------ Hide label if has default value on page load --------*/
    $(document).ready(function(){
      if($('.form-item input').val() !== "") {
          $(this).prev('label').hide();
      }
    });
  }
};
})(jQuery, Drupal, this, this.document);

Drupal outputs

<div class="form-item form-type-textfield form-item-field-email-address-und-0-email">
  <label for="edit-field-email-address-und-0-email--2">Email Address <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" id="edit-field-email-address-und-0-email--2" name="field_email_address[und][0][email]" value="[email protected]" size="60" maxlength="128" class="form-text required">
</div>

1 Answer 1

0

Check out this

   if ($(value).val() != ""){
  var fieldId = $(value).attr("id");
  $("label[for='"+fieldId+"']").hide();
}
4
  • I have seen that. It returns this error: Uncaught ReferenceError: value is not defined. I am using jQuery 1.10
    – xturgorex
    Commented Nov 11, 2015 at 18:45
  • I'm just going to add a class that change font color to rgba(0,0,0,0) and remove it on focus
    – xturgorex
    Commented Nov 11, 2015 at 20:03
  • change "value " with your field or this Commented Nov 12, 2015 at 5:13
  • I'm not sure how to adapt that code to my needs. I need to target elements based on class, because there are multiple elements on a page and they change page to page. Maybe have a look at the code I've posted and see what would be causing the problem.
    – xturgorex
    Commented Nov 13, 2015 at 3:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.