Search jQuery

jQuery Forum

Floating Labels for Select Dropdown

in Using jQuery • 4 years ago

I am using this code which returns "undefined" for the label of Select Boxes. This is because presumably the placeholder attribute is not supported for select elements.

(function($) {
'use strict';
$.fn.jvFloat = function () {
return this.filter('input:not([type=submit]), textarea, select').each(function() {
function getPlaceholderText($el) {
var text = $el.attr('placeholder');
if (typeof text == 'undefined') {
text = $el.attr('title');
}
return text;
}
function setState () {
var currentValue = $el.val();
if (currentValue == null) {
currentValue = '';
}
else if ($el.is('select')) {
var placeholderValue = getPlaceholderText($el);
if (placeholderValue == currentValue) {
currentValue = '';
}
}
placeholder.toggleClass('active', currentValue !== '');
}
function generateUIDNotMoreThan1million () {
var id = '';
do {
id = ('0000' + (Math.random()*Math.pow(36,4) << 0).toString(36)).substr(-4);
} while (!!$('#' + id).length);
return id;
}
function createIdOnElement($el) {
var id = generateUIDNotMoreThan1million();
$el.prop('id', id);
return id;
}
var $el = $(this).wrap('<div class=jvFloat>');
var forId = $el.attr('id');
if (!forId) { forId = createIdOnElement($el);}
var required = $el.attr('required') || '';
var placeholder = '';
var placeholderText = getPlaceholderText($el);
if ($(this).is('textarea')) {
placeholder = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
} else {
placeholder = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
}
setState();
$el.bind('keyup blur', setState);
});
};
})(window.jQuery || window.Zepto || window.$);

However, how could I modify the above so that the label takes the value of the class "gf_placeholder" as seen below? In the below example the label would be "Salutation *".

<select name="input_6" id="input_19_6" class="gfield_select" tabindex="0" aria-required="true" aria-invalid="false" style="outline: none;"><option value="" selected="selected" class="gf_placeholder">Salutation *</option><option value="Miss">Miss</option><option value="Ms.">Ms.</option><option value="Mrs.">Mrs.</option><option value="Mr.">Mr.</option><option value="Dr.">Dr.</option></select>

Replies(6)

jakecigar

Re: Floating Labels for Select Dropdown

4 years ago

Select is different. That’s probably why it was not included by the original author.

This plugin has not been updated in many years, and is probably abandoned because all that work can be done with CSS alone or with less javaScript.

https://css-tricks.com/float-labels-css/ shows many similar, and some better floating labels. None that I have seen do selects.

JΛ̊KE

neodjandre

Re: Floating Labels for Select Dropdown

4 years ago

thanks for the reply Jake. I have tried a lot of different options and this plugin ticks all the boxes. It even defines the label for select, but it places a value of "undefined" for the label.

<label class="placeHolder" for="input_2_41">undefined</label>

I just need to replace this with the . gf_placeholder text and then everything would be good. Should be easy enough for someone more experienced than me to implement!

jakecigar