We Keep Coding

Jquery issue with val not working as expected

I have a couple of forms on a site. On the first form I used the code below to add a border color if the input field is not blank and remove it if it is blank. This works just fine no issues. But I've found that when I try to use the same method on other forms, to do something else using the same logic, it does not work.
I have read through many forums and what I'm seeing is that the code is only read on page load. But I have forms that run the function after the page is far past loading. Can someone give some light to this? I'm really trying to understand the way this works fully.
Code that works on form:
var checkErrorIn;
jQuery(document).ready(function ($) {
checkErrorIn = setInterval(CheckErrorInput, 0);
});
function CheckErrorInput() {
if (jQuery('body').is('.page-id-6334')) {
// First Name, Last Name validation colors
var pasdFName = jQuery('#first_name').val();
var pasdLName = jQuery('#last_name').val();
if (pasdFName != '') {
jQuery('#first_name').addClass('formConfirm_cc');
} else {
jQuery('#first_name').removeClass('formConfirm_cc');
}
if (pasdLName != '') {
jQuery('#last_name').addClass('formConfirm_cc');
} else {
jQuery('#last_name').removeClass('formConfirm_cc');
}
if (pasdFName != '' & pasdLName == '') {
jQuery('#last_name').addClass('formError_cc');
} else {
jQuery('#last_name').removeClass('formError_cc');
}
if (pasdFName == '' & pasdLName != '') {
jQuery('#first_name').addClass('formError_cc');
} else {
jQuery('#first_name').removeClass('formError_cc');
}
}
}
Code that is not working:
if (jQuery('body').is('.woocommerce-page')) {
var checkActiveName = jQuery('.woo_login_form > form > #username').val();
jQuery('.woo_login_form').on('input', function(){
jQuery('.woo_login_form').addClass('cdc_keep_active');
});
if (checkActiveName =='') {
jQuery('.woo_login_form').removeClass('cdc_keep_active');
}
}
What I am trying to do is fix an issue with a form becoming hidden if not hovered over even when the input has characters. Based on my research I figured I'd do the .on to get the class added when the input got characters. That works but the removal of the characters isn't removing the class. The logic looks right to me. What am I missing?
Thank you in advance for your help and insight.
Update:
Ok so I ended up doing this:
jQuery('.woo_login_form').on('click', function () {
jQuery('.woo_login_form').addClass('cdc_keep_active');
});
jQuery('.custom-login-box > a').on('click', function () {
jQuery('.woo_login_form').toggle();
});
For some reason my class would not add with any of the methods suggested individually so I combined the logic. The first part adds the class that makes the form visible but then the form won't close if clicked out of regardless of the 'removeClass'. So I added a toggle (thank you commenters) method to the "hovered link" to allow users to close the box if not needed.
Would still like to understand why the first method worked in one instance but not the other. Any and all insight appreciated. Thank you.

In your current code example you immediately check for the value of the username field.
var checkActiveName = jQuery('.woo_login_form > form > #username').val();
The thing with this is that checkActiveName will never change, unless it is reassigned elsewhere in the code.
What you need to do is to check the current value after every input of the user. That means moving that line of reading the value of the input inside the input event listener.
if (jQuery('body').is('.woocommerce-page')) {
var $wooLoginForm = jQuery('.woo_login_form');
var $userName = jQuery('#username'); // This ID should only exist once, so no need for complex selectors.
$wooLoginForm.on('input', function() {
var checkActiveName = $userName.val();
if (checkActiveName =='') {
$wooLoginForm.removeClass('cdc_keep_active');
} else {
$wooLoginForm.addClass('cdc_keep_active');
}
});
}
On a sidenote: using setInterval to validate your form is a bad practice. This would basically run infinitely. It doesn't have to. You only have to check if a form is valid after the user enters a value.
Apply the same technique with the event listener like in your second code snippet.
var $document = jQuery(document);
$document.ready(function ($) {
/**
* It might even be better to listen for the input event on the form
* that has to be validated, but I didn't see it in your code.
* Right now it listens for input on the entire page.
*/
$document.on('input', CheckErrorInput);
});

too much recursion error in jQuery when trigger the checkbox

I am trying to trigger the unchecked checkbox, so I tried lot with help of Google, still I can't find a solution,
Attempt 1:
jQuery(".checkbox").attr("checked", false).trigger("click");
When using attempt 1, no changes in my OP,
Attempt 2:
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if (jQuery.inArray(code,all_list) >= 0) {
return false;
}
else {
jQuery(this).trigger("click");
}
});
using attempt 2 returns a error too much recursion
So how to avoid this error? or how to trigger the unchecked checkbox?
Thanks!
Solved:
problem solved with help of #praveen kumar and attempt 2 I changed the if else, now too much recursion solved.
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if(jQuery.inArray(code,all_list) == -1){
jQuery(this).trigger("click");
}
}

You can completely change your Second Attempt to this way:
jQuery(".checkbox:checkbox:not(:checked)").trigger("click");
Hope this helps!
You need to use this way:
jQuery(".checkbox").filter(function () {
return (jQuery(this).prop("checked") == false);
}).trigger("click");
Or you can use:
jQuery(".checkbox").filter(function () {
return (this.checked == false);
}).trigger("click");
Or much simpler:
$('.checkbox:not(:checked)').trigger("click");

how to pass $(this) object from one function to another?

I think its very basic Object oriented javaScript related question. But I'm still very confused about it. I would like to pass $(this) object from 1 function to another. So that I can get the href attr of the link clicked.
Here my sample code
HTML
TEST
TEST
JS
$(document).on("click", ".test", function () {
var $this = $(this);
var rel = $this.attr("rel");
if (rel == "image") {
e.preventDefault();
openImage($this);
} else if (rel == "video") {
openVideo($this);
}
});
function openImage($this) {
var href = $this.attr("href");
alert(href);
}

Check out the examples in the jQuery documentation page. You'll find that the on method applies to the selected elements, in the case of your code, it's the document object. To get the attribute that you want, jQuery is not necessary to wrap the element. Here's a JSBin example. One more thing, try reemplace == with === to get type checking also. Hope it helps

My question had 1 small syntax error please (check 1st comment on question)
Following is the code I ended up using.
$(document).on("click", ".test", function (e) {
var anchor = $(this);
var rel = anchor.attr("rel");
if (rel == "image") {
e.preventDefault();
openImage(anchor);
} else if (rel == "video") {
openVideo(anchor);
}
});
function openImage(anchor) {
var href = anchor.attr("href");
alert(href);
}
Thank you!

Why would a jQuery function be only selectively run?

I am trying to debug this (incomplete) script, but it is behaving inconsistently. The main problem is when I click off of an item, sometimes the $(editObj).removeAttr('style'); runs and sometimes not. Through the Chrome inspector I can see that the editObj variable in each case is properly defined, but it isn't always getting its inline style attribute removed. Sometimes, and sometimes not. Cannot determine the reason.
I'm a bit out of my element with this code. Maybe something about it is obvious; Regardless I'd appreciate some ideas on why this sort of unpredictable might be occuring!
var editObj = null;
var inputType = 'text';
var input = '#textEdit';
var formId = '#form_undefined'
$(function() {
$("#textEdit").click(function(event) {
event.stopPropagation();
});
$('body').click(function(event) {
if (editObj){
//textedit contents to editobj and
if (inputType == 'text'){
$(editObj).text($("#textEdit").val());
}
$("#textEdit").removeAttr('style').hide();
$(editObj).removeAttr('style');
var previewId = $(editObj).attr('id');
var formId = previewId.replace('bzm', 'form');
$("#" + formId).val($("#textEdit").val());
//ajax modify database
editObj = null;
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
event.stopPropagation();
loadEditor($(this));
});
});
function loadEditor(element){
$("#textEdit")
.copyCSS(element)
.offset($(element).offset())
.css("display", "block")
.val($(element).text())
.select();
$(element).css("color", "transparent");
editObj = element;
}

I've had trouble in the past with .removeAttr('style'); not actually removing all the inline styles.
Use
$(editObj).attr('style', '');
instead of
$(editObj).removeAttr('style');

I dint see any code that initializes e editobj variable.. May be Im missing Anthony.. Anyways what are the chances of the edit obj being null.. Just put a log statement in the click function to always log ur editobj and see if it is null smtimes

comparing innerHTML value with a string variable in javascript

function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerHTML)
{
alert("New File");
} //close If NewFile.rtf
else {
alert("Not new file");
}
}//close Open()
Here I have string "NewFile.rtf" in a element with id="FName" on the page. When the FName contains "Newfile.rtf" in it it stills goes to the else part of the function instead of going to if part. I tried different ways to write the compare statement in the if condition, no luck . Appreciate the help if anyone can help figure out this.
Thank you.

The simplest explanation is that your cc.innerHTML call is not returning what you think it is returning. Why don't you console.log or debug.
add something like
var innerhtml = cc.innerHTML;
console.log("innerHTML = " + innerhtml) // wont work in IE.
before the if statement.

Try using regular expressions to find your filename, also check if the text you are searching is not into another DOM element, elimate left and right spaces, you should use Google Chrome for debuging the Javascript code:
var html = document.getElementById('FName').innerHTML;
if( html.search("Newfile.rtf") != -1) { /*found*/ }
else { /*not found*/ }

but what's the type of this element? if it's about an input text type .. you can't use innerHTML but you'll use value then.

Use innerText to get that
function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerText)
{
alert("New File");
} //close If NewFile.rtf
else {
//enter code here
alert("Not new file");
}
}