Develop Reference

JS - Add class to form when input has value

I have a form with one input field for the emailaddress. Now I want to add a class to the <form> when the input has value, but I can't figure out how to do that.
I'm using this code to add a class to the label when the input has value, but I can't make it work for the also:
function checkForInputFooter(element) {
const $label = $(element).siblings('.raven-field-label');
if ($(element).val().length > 0) {
$label.addClass('input-has-value');
} else {
$label.removeClass('input-has-value');
}
}
// The lines below are executed on page load
$('input.raven-field').each(function() {
checkForInputFooter(this);
});
// The lines below (inside) are executed on change & keyup
$('input.raven-field').on('change keyup', function() {
checkForInputFooter(this);
});
Pen: https://codepen.io/mdia/pen/gOrOWMN

This is the solution using jQuery:
function checkForInputFooter(element) {
// element is passed to the function ^
const $label = $(element).siblings('.raven-field-label');
var $element = $(element);
if ($element.val().length > 0) {
$label.addClass('input-has-value');
$element.closest('form').addClass('input-has-value');
} else {
$label.removeClass('input-has-value');
$element.closest('form').removeClass('input-has-value');
}
}
// The lines below are executed on page load
$('input.raven-field').each(function() {
checkForInputFooter(this);
});
// The lines below (inside) are executed on change & keyup
$('input.raven-field').on('change keyup', function() {
checkForInputFooter(this);
});
I've updated your pen here.

Here it is, using javascript vanilla. I selected the label tag ad form tag and added/removed the class accoring to the element value, but first you should add id="myForm" to your form html tag. Good luck.
function checkForInputFooter(element) {
// element is passed to the function ^
let label = element.parentNode.querySelector('.raven-field-label');
let myForm = document.getElementById("myform");
let inputValue = element.value;
if(inputValue != "" && inputValue != null){
label.classList.add('input-has-value');
myForm.classList.add('input-has-value');
}
else{
label.classList.remove('input-has-value');
myForm.classList.remove('input-has-value');
}
}

You can listen to the 'input' event of the input element and use .closest(<selector>) to add or remove the class
$('input').on('input', function () {
if (!this.value) {
$(this).closest('form').removeClass('has-value');
} else {
$(this).closest('form').addClass('has-value');
}
})
Edit: https://codepen.io/KlumperN/pen/xxVxdzy

How to highlight double-clicked word in input after input.select()

There is an input with some text. All text in this input has to be selected when input is focusing (first click on input) and specific word has to be selected when second click on input occurs.
I try to implement the same functionality that URL-bar in Chrome(Version 74.0.3729.131 (Official Build) (64-bit)) has.
Current behavior of input you can see here: https://jsfiddle.net/deaamod1s/rh5mw0e4/23/
The only solution I see it's to check was the input double-clicked or not and after that if input wasn't double-clicked - to do input.select()
input.onfocus = function(e) {
let hasValueWhenGotFocused = false;
if (input.value) {
hasValueWhenGotFocused = true;
}
setTimeout(() => {
if (hasValueWhenGotFocused && this.className.indexOf("doubleclicked") == -1) {
this.select();
} else {
this.classList.remove("doubleclicked");
}
},400);
}
input.ondblclick = function(e){
this.classList.add('doubleclicked');
}

The onfocus event handler is always executed before the ondblclick.
I suggest to delay the focus handler so that it can be executed after a possible double click (updated fiddle here):
input.ondblclick = function (e) {
// set....
this.dataset.dblclick = true;
}
input.onfocus = function (e) {
this.dataset.dblclick = false;
setTimeout(function (_this) {
// if not set...
if (_this.dataset.dblclick == "false") {
_this.select();
} else {
// remove ...
delete _this.dataset.dblclick;
}
}, 200, this);
}
Try to select second word using only two click<br>
<input type="text" id="input" value="sdsas select_me">

jquery selector returns sometimes empty object

i have the following piece of code that puts focus on textarea $newCommentBody field if the value of clicked radiobutton is 'not_important' or 'for_the_future'.
$(document).ready(function () {
$('#inhabitant_request_realization').on('click', 'input[type=radio]', function () {
var $newCommentBody = $('.fos_comment_comment_form_holder textarea'),
$tooltiptext = $('.tooltiptext'),
$this = $(this);
if ($this.val() == 'not_important' || $this.val() == 'for_the_future') {
$newCommentBody.focus();
$tooltiptext.show();
} else {
$tooltiptext.hide();
}
});
});
The problem, actually is that $newCommentBody is loaded asynchronously and after i click the radio button the focus is sometimes put on textarea sometimes not because $newCommentBody is empty in that case.
Thank you.

Focus does not hide the hint on browser back button (jquery.hint.js)

I use jquery.hint.js. On page load everiting is fine but when i use back browser button the focus does not hide the hint.
jQuery.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}
return this.each(function () {
// get jQuery version of 'this'
var $input = jQuery(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = jQuery(this.form),
$win = jQuery(window);
function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};
example on normal page load: http://prntscr.com/sik0d
example after using back browser button: http://prntscr.com/sikap (doses not hide the hint on focus, it just add text to input field)
how to fix this. How to force this script to reload on back button? thanks

I finally find jquery.hint.js witch includes a fix for using the browser back button. So here is a link: https://gist.github.com/madmanlear/1723896
JavaScript:
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) blurClass = 'blur';
return this.each(function () {
var $input = $(this),
title = $input.attr('placeholder'),
$form = $(this.form),
$win = $(window);
function remove() {
if ($input.val() === title) {
$input.val('').removeClass(blurClass);
}
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '' || this.value == title) {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};
})(jQuery);

Events being bound twice or more jquery

I'm trying to generate html on the fly with javascript. I'm binding on the click of buttons on my page. There are multiple buttons on my page which are causing my elements to be bound multiple times which produces the desired results to appear in the amount of times the button has been clicked.
My question is there something that can check if a element is already bound in jquery? If so, how do I incorporate that with the .live() function in jquery.
Here is my code:
$(document).ready(
function () {
$(':button').live("click", ".textbox, :button", function () {
alert("binding");
$(".textbox").click(function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(".textbox").blur(function () {
if (this.value == "") {
this.value = defaultVal;
}
});
$('[name="numsets"]').blur(function () {
if (!parseInt(this.value)) {
$(this).val("you need to enter a number");
}
});
$('[name="weightrepbutton"]').click(function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
});
The problem is line 4, every time a button is clicked, all functions that were previous bound seem to be bound to the same function twice, which is a problem.
Thanks for the help!

You are doing it twice ! One inside another. Take out the outer binding and it should work
$(document).ready(function () {
$(document).on("click",".textbox",function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(document).on("blur",".textbox",function () {
var item=$(this);
if (item.val() == "") {
item.val(defaultVal);
}
});
$(document).on("blur","input[name='numsets']",function () {
var item=$(this);
if (!parseInt(item.val())) {
item.val("you need to enter a number");
}
});
$(document).on("click","input[name='weightrepbutton']",function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
if you are using jQuery 1.7+ version, consider switching to jQuery on instead of live.
EDIT: Updated live to on as OP mentioned it in the comment.