We Keep Coding

How do I check if value is empty?

I have a few select menus that include blank options. When both are blank (usually on the first page load), I would like to show some hidden div.
This is what I have:
$('.variant_options select').each(function() {
if ($(this).attr('value') === '') {
// some code here to show hidden div
console.log("No options chosen");
}
});
This doesn't seem to work.
Edit 1
For what it's worth, I have tried something like this:
if (!$(this).attr('value'))
And that has seemed to work, but it breaks functionality elsewhere.

<select> elements don't have a value attribute, so you need to use .val() on the element to find out if the currently selected option is empty.
if ($(this).val() === '') {
// value of select box is empty
}
this.value === '' should also work
To check whether no options are selected:
if (this.selectedIndex == 0) {
// no option is selected
}

You can do so by using the following:
if($(this).val() === '') {
// value is empty
}
I believe also the following too:
if(!$(this).prop('value')) {
// It's empty
}

You can simply do this:
$('.variant_options select').each(function () {
if ($.trim($(this).val()) === '') {
// some code here...
}
});

jQuery can check for value by using $(this).val()
So you would do if ($(this).val === '')`
If you wanted to check for some other attribute, like href or src, you could do
if ($(this).attr('href') === ''

In case if you have spaces, use this trick:
if ($.trim($(this).val()) === '') { ...

Do something depend on element id with jQuery

I have some function inside click action. I need to stop this function if the last of my html list element will be have some id, so I do this but function does not work... Can you help me?
carousel_controls_buttons.on('click', function(){
var settings_list_last_element_id = settings_menu_element.attr('id') == 'r_00';
if (settings_menu_element.last(id === settings_list_last_element_id)) {
}
else {
renumNext();
}
});

Try changing:
if (settings_menu_element.last(id === settings_list_last_element_id))
to
if (settings_menu_element.last().attr('id') === settings_list_last_element_id)
Edit:
if (settings_menu_element.last().attr('id') === settings_list_last_element_id){
return false;
} else {
renumNext();
}
Or even better:
if (settings_menu_element.last().attr('id') !== settings_list_last_element_id){
renumNext();
}

Your if-statement looks a bit odd. Try something like this instead:
carousel_controls_buttons.on('click', function(){
// Do nothing if last element has a certain id-attribute
if (settings_menu_element.last().attr("id") === 'r_00') {
return false;
}
renumNext();
});

html+javascript: How to disable null option in dropdownlist on some condtition

I have html page with a dozen dropdownlinst
One of them is
#Html.DropDownListFor(model => model.PrimaryNetworkInt, new SelectList(ViewBag.AvailableNetworks, "ID", "Name"), "Offline")
Second one store some other value, and when I change it to "AAA" I must disable in the fist one ability to choose NULL-oprtion (i.e. "Offline") (and return it back if was selected something else)
Select logic works fine:
$('#SecondDDList').change(function () { SecondDDListChanged(); });
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
//Here i need logic to disable NULL selection
} else {
//Here i need enable NULL option
}
}
What is better way to do it? May be something like:
$("#PrimaryNetworkInt option[value=null]").attr("disabled", "disabled");
Any suggestion?

You can use the methods .show() and .hide() for be shure the user can (or can not) select the value
$("#PrimaryNetworkInt").change(function() {
if ($(this).val()==-1){ //-1 i.e == "AAA" in my example
$("#PrimaryNetworkInt option[value='null']").hide();
} else {
$("#PrimaryNetworkInt option[value='null']").show();
}
});

jQuery(function () {
jQuery('#SecondDDList').find("option").each(function () {
if (jQuery(this).val() == -1 || jQuery(this).val() == "null" ) {
jQuery(this).attr("disabled", true);
}
});
});

To disable particular option just set its disabled attribute.
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
$("#optionId").attr("disabled", "disabled");
} else {
$("#optionId").removeAttr("disabled", "disabled");
}
}

removeAttr() issue

Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.

try (mail_name.val() == "") change to (mail_name == "")

Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/

Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}

jQuery - Find any input with a given class that has no value

I have a (very) basic validation script. I basically want to check for any inputs with class .required to see if there values are a) blank or b) 0 and if so, return false on my form submit. This code does not seem to return false:
function myValidation(){
if($(".required").val() == "" || $(".required").val() == 0){
$(this).css({ backgroundColor:'orange' }) ;
return false;
}
}
Appending this function to my onSubmit handler of my form is not returning any results. Any light shed on this matter will be appreciated.
I am basically after a function that iterates through all the inputs with class .required, and if ANY have blank or 0 values, return false on my submit and change the background colour of all badly behaved inputs to orange.

Your code currently gets the .val() for the first .required, from the .val() documentation:
Get the current value of the first element in the set of matched elements.
You need to filter through each one individually instead, like this:
function myValidation(){
var allGood = true;
$(".required").each(function() {
var val = $(this).val();
if(val == "" || val == 0) {
$(this).css({ backgroundColor:'orange' });
allGood = false;
}
});
return allGood;
}
Or a bit more compact version:
function myValidation(){
return $(".required").filter(function() {
var val = $(this).val();
return val == "" || val == 0;
}).css({ backgroundColor:'orange' }).length === 0;
}

Try this jQuery selector:
$('.required[value=""], .required[value=0]')

You could also do it by defining your own custom jQuery selector:
$(document).ready(function(){
$.extend($.expr[':'],{
textboxEmpty: function(el){
return ($(el).val() === "");
}
});
});
And then access them like this:
alert($('input.required:textboxEmpty').length); //alerts the number of input boxes in your selection
So you could put a .each on them:
$('input.required:textboxEmpty').each(function(){
//do stuff
});