We Keep Coding

How can I determine if an HTML element has a value, even if it is empty?

I have an element that can exist as:
<input type="hidden" name="simple_search_criteria" id="simple_search_criteria" value="" />
or
<input type="hidden" name="simple_search_criteria" id="simple_search_criteria"/>
and my code needs to know whether the value exists and what the value is. I have code that works below, but feels kludgy since I'm doing two calls on the element, any suggestions on improving the code below?
if ($('#simple_search_criteria').attr('value') !== undefined) {
var searchCriteria = $('#simple_search_criteria').val();
// Do stuff with searchCriteria, even if it is an empty string
}
I like the code below but it doesn't work since .val() returns an empty string in both situations...
var searchCriteria = $('#simple_search_criteria').val();
if (searchCriteria) {
// do stuff with searchCriteria
}
Any improvements would be appreciated, I'm always trying to improve my js!

It would be faster to use regular JavaScript. Try hasAttribute and getElementById
var searchCriteria = document.getElementById('simple_search_criteria').hasAttribute('value');

I don't know if there is a jquery helper for checking the existance of an attribute but javascript has the method hasAttribute natively.
document.getElementById("simple_search_criteria").hasAttribute("value");

The idea is to check that val() returns anything and if so check if what is there is not empty.
To respond to a comment (that was deleted), typeof will return 'undefined' if for example the element (which corresponds here to $('#simple_search_criteria')) does not exist. Documentation for typeof can he also useful. You may have a look here.
var searchCriteria = $('#simple_search_criteria').val();
if (typeof(searchCriteria) !== 'undefined' and searchCriteria.length > 0) {
// do stuff with searchCriteria
}

An input element always has a value, even if its value attribute is omitted in the markup, which is why .val() doesn't distinguish between the presence of the attribute with an empty value, and the absence of the attribute. Critically, your form will submit with the same simple_search_criteria= (empty string) data in both cases, so the server receiving the form submission will not be able to distinguish the two. This is something you'll need to keep in mind when designing your form. If you want to omit this parameter you need to omit this particular input element altogether, not just its value attribute.
Nevertheless, if you want your application to behave based on the presence or absence of the attribute you need to check that directly. You can save some overhead by caching the selector in a separate variable:
var searchCriteriaInput = $('#simple_search_criteria');
if (searchCriteriaInput.attr('value') !== undefined) {
var searchCriteria = searchCriteriaInput.val();
// Do stuff with searchCriteria, even if it is an empty string
}

You can instead use the typeof attribute to distinguish between undefined and the empty string in this case:
typeof(document.getElementById("simple_search_criteria"))==='string';
More details here

How do I check if an element is NOT empty with jquery?

I need to check if an element is empty and if another is NOT empty. The first part of the if works but how do I check if the #dynamicForm element is NOT empty?¨
This obviously doesn't work but I need something like it:
if ($("#formButton").is(':empty') && $("#dynamicForm").is(':notempty')) {
//do stuff
}

if(!$("#dynamicForm").is(':empty')){
// code here...
}
Note the not operator (!) in front.

First of all you can check if the selected element is empty and negate it:
!$('#dynamicForm').is(':empty')
Furthermore you can check if it's not empty with jquery selector :not:
$('#dynamicForm').is(':not(:empty)')
A third way would be to select all elements, that are not empty and check the length of the jquery collection:
$('#dynamicForm').not(':empty').length
If you need this check in several places you can add your own function to jQuery:
$.fn.notEmpty = function() {
return !$(this).is(':empty')
}
you can use it like this:
if($('#dynamicForm').notEmpty())
That isn't realy clean and it's not keeping with the jquery conventions. So better extend the selectors instead of extending the functions:
$.extend($.expr[':'],{
notEmpty:function(c) {
return !$(c).is(':empty');
}
});
Now you can use it very straightforward:
if($('#dynamicForm').is(':notEmpty'))

jQuery objects and elements

I know I've seen a beautifully straightforward answer to a similar question before, but I haven't been able to remember or locate it, so apologies in advance.
I'm not new to coding, but I've had no formal training with Javascript/jQuery. Everything else I used has been strictly typed, so I'm still struggling with how JS does typing. I have a function that fires every time a child of a specific class is changed (I'm writing this for Sharepoint, so there is some working-around that has to be done.)
Why is it when I write this:
$(".listen *").change(function(event) {
var element = event.target;
if (element.title == 'Workstation')) {
alert(element.val());
}
}
I get an error that .val() is not a function, and I have to instead write
$(".listen *").change(function(event) {
var element = event.target;
if (element.title == 'Workstation')) {
alert($('#' + element.id).val());
}
}
What is the difference between the object that "element" is and the object retrieved by using the id? Aren't they both jQuery objects? I realize that not all objects returned by my function might actually have a value to return, but I don't understand how the distinction is being made.
Thanks!

In your first code block the 'element' variable is not a jQuery object, it is a DOM object. The .val() method is not defined for DOM objects. It is only defined for jQuery objects.
In your second code block $('#' .element.id) returns a jQuery object that does have the val() method defined.
So to answer your question, No they are not both jQuery objects, only the second one is.

You must make jQuery object from your dom (event.target) like that;
$(".listen *").change(function(event) {
var element = $(event.target);
if (element.attr('title') == 'Workstation')) {
alert(element.val());
}
}
Then you can use your jQuery object as you want. By the way, if you want to catch the changed element, you can use $(this) instead of $(event.target).
$(".listen *").change(function(event) {
var element = $(this);
if (element.attr('title') == 'Workstation')) {
alert(element.val());
}
}

Javascript Compare Objects to Elements

http://jsfiddle.net/PhilFromHeck/KzSxT/
In this fiddle, you can see at line 38 in the Javascript that I've attempted to make a comparison that isn't working. I believe it because one of the variables is an Object, where the other is an Element; does anyone have any advice as to how I can can find a match between these two?
menuID[0] = document.getElementById('menuOne');
menuID[1] = document.getElementById('menuTwo');
menuID[2] = document.getElementById('menuThree');
menuID[3] = document.getElementById('menuFour');
$('.menu').mouseenter(function () {
for (var i = 0; i < 3; i++) {
if(menuID[i] == $(this)){
//this condition is not met, there's an alert which will add more detail in the fiddle
}
}
}

Method document.getElementById returns a DOM element an not a jQuery object. In the mouseenter event handler this refers to a DOM element as well.
So in order to compare them you shouldn't convert this to a jQuery object:
if (menuID[i] === this) { ... }

You want to use jQuery's .is() for this.
if($(this).is(menuID[i])){

A few issues I see here:
One is simply that, in your jsfiddle, the first 4 lines of code that you list aren't running before the bottom block runs. I'm not sure why you have both an init function that you attach to window.onload and a document.ready() function; but you'll want to make sure that init runs.
Secondly; as VisioN said, I think the main issue is that you're trying to compare a jQuery wrapper around a DOM element $(this) with a DOM element (the result of getElementById). As he says, this == menuID[i] will work.
At a design level, why not simply use the id to identify the element? this.id will give you the the id; why not simply use that to determine which menu div you're looking at?

How can I tell whether an element matches a selector?

Let's say I've got a DOM element - how can I tell whether it matches a jQuery selector, such as p or .myclass? It's easy to use the selector to match children of the element, but I want a true/false answer to whether this particular element match?
The element may not have an ID (and I can't assign it a random one for reasons beyond this), so I can't apply my selector to the element's parent and look for children with the same ID as mine.
Will this work as intended? I can't figure out Javascript object comparisons.
$(selector, myElement.parentNode).each({
if (this == myElement) // Found it
});
Seems like there would be an easy way to see whether a DOM element matches a jQuery selector...

You can use the is() method:
if($(this).is("p")){
// ...
}

Without jQuery, using Element.matches():
var elements = document.querySelectorAll('div');
console.log(
elements[0].matches('.foo'), // true
elements[0].matches('.bar'), // false
elements[1].matches('[title=bar]'), // true
)
<div class='foo'></div>
<div title='bar'></div>
See supported browsers list

I believe the is() method is what you are looking for.
Otherwise, you might just try selecting the item directly, if that is what you mean.
So if it's an "a" with a class of "myclass", just do $("a.myclass")

I can't apply my selector to the
element's parent and look for children
with the same ID as mine.
You can't do that anyway - the id attribute must be unique.

Maybe you just want:
$(".complicated #selector p.with > div.manyParts").length
If there are no matches, length returns 0, which is falsy, so you can use it in an if statement, like:
if($(".doesThis #exist").length) {
// Do things
}
Probably would be worth storing it in a separate variable and THEN checking the length; that way, if you need to do anything with the matched elements, you don't have to execute the same selector again.

Try Element.matches()
Element.matches()
document.addEventListener("click", event => {
if (event.target.matches(".elementsClass")) {
// It matches
} else {
// Does not match
}
});