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()) === '') { ...
Related
I am trying to achieve AutoFocus functionality on the first empty form field which can be an input element or any kind i.e.
1. textbox
2. radio button
3. Select
4. checkbox
I have had a look at the jquery website and tried using the :input selector
but I am unable to achieve Autofocus on any input field other than text box.
I have also setup a JS Fiddle,
Fiddle for code
Can somebody help here?
You might need to use filter() to find the inputs with empty values:
$(function () {
$("input:enabled").filter(function () {
return this.value.trim() == "";
}).first().focus();
});
This will not work if you are using checkbox. So for that:
$(function () {
$("input:enabled").filter(function () {
if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio")
return $(this).val().trim() == "" || !this.checked;
else
return this.value.trim() == "";
}).first().focus();
});
Fiddle: http://jsfiddle.net/7fwrd2rk/
You need to filter() out the empty/unchecked inputs and set focus to the first element in the matched set, as below.
$(function () {
$("input:enabled").filter(function () {
return this.type.match(/checkbox|radio/i) && //when it's a checkbox/radio
!this.checked || //get me a list of unselected ones
($.trim(this.value) === ""); // else get me a list of empty inputs
}).first().focus(); //grab the first from the list and set focus
});
Here is a demo along the same lines.
This includes textarea and select.
I'm trying to get my input fields (associated by class) to change colour when they have content.
This is working, but removing the class isn't activating properly, and I'm unsure why. If I enter content into the first, then second input, delete the content from the first, the class is removed, however if I delete the content from the second before the first, the background remains blue.
I can't use the textboxes Id's as they're already in use.
JS Code:
$('.checkFiller').on('change', function () {
if ($('.checkFiller').length > 0) {
$(this).addClass('allFiller');
}
if ($('.checkFiller').val() == '' || $('.checkFiller').val() == 0 || $('.checkFiller').val() == null) {
$(this).removeClass('allFiller');
}
});
Here is a jsfiddle to demo my frustration - what am I doing wrong?
https://jsfiddle.net/qwgj77tm/1/
You need to use this to get the one you are editing use .hasClass() and .length to acheive this
$('.checkFiller').on('change', function () {
if($(this).val().length==0){
$(this).removeClass('allFiller');
}else $(this).addClass('allFiller');
});
.allFiller {
background-color: #333366;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkFiller">
<input class="checkFiller">
<input class="checkFiller">
You should change your references from $('.checkFiller') to $(this) in the on:
$('.checkFiller').on('change', function () {
if ($(this).length > 0) {
$(this).addClass('allFiller');
}
if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) {
$(this).removeClass('allFiller');
}
});
As is, you're checking the first input with the class, rather the one that has changed.
I am trying to show a field, which is hidden, but shows up when 2 previous fields are filled.
$('#planner-locatie-ehv').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
But the field which is called #hideentertainment won't show up, although the previous fields has Requirement1 and Requirement2, when i use the OR statement ||, it does work, when 1 value is filled in it shows up. How can i make this possible?
You need to listen on both elements, not just the first one.
$('#planner-locatie-ehv, #planner-stad').change(function() {
var isValid = $("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2";
$("#hideentertainment").toggle(isValid);
});
#dandavis is correct. It's only watching the first one for change. You can add the other to your selector to fix it.
$('#planner-locatie-ehv, #planner-stad').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
I am using this simple code to filter through a search form with many text inputs and see if they have a value and then add a class.
Works perfectly in Chrome, safari and Firefox but not in IE9.
$('input[type="text"]').filter(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
Please advice, thanks in advance!
EDIT
Change to each but doesn't solve the issue... Here it is with the event that triggers the function...
$(document).on('event-ajax-form-is-loaded', function() {
$('input[type="text"]').each(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
});
From the limited information you shared, this is how you should be doing this:
$('input[type="text"]').filter(function() {
return $(this).val() !== '';
}).addClass('used');
.filter() is supposed to reduce a set of matched elements so its filter function should always return a bool instead of manipulating the DOM.
Edit: Based on your updated code snippet and the page link you shared in the comments, if you are using jQuery in WordPress, then its always safer to wrap the code like so:
(function($) {
/* jQuery Code using $ object */
})(jQuery);
enter code hereIn JS you can check the element value by getting their tag name
for (var i = 0; i < document.getElementsByTagName('input').length; i++){
if (document.getElementsByTagName('input')[i].value == "")
{
alert("The value of textbox at " + i + " is empty");
}
}
Working Demo
Or like what other people suggest, use a .each in JQuery
$('input[type="text"]').each(function(i){
if ($(this).val() == "") {
alert("The value of textbox at " + i + " is empty");
}
});
anohter Working Demo
If you insist to use filter and here you go
$('input[type="text"]').filter(function()
{ return $( this ).val() != ""; }).addClass("used");
Last Working Demo
and jquery filter reference
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");
}
}