Develop Reference

Why focusout event is not fired

I created code for dropdown menu instead of classic select menu which I am not able to style. I have last step to remove dropdown list if focusout event is fired, but I ahve this problem. It is not working for one element in my code.
I am thinking a long time why it is not fired focusout event on this element inputSelectSubCat = $("input[name=subcategory]"); or generally var inputSelect = $('.add-item__input-select');.
In firefox developer console it is added action for this event, but it is never fired.
Thank you very much for your advices.
This is my code:
/* SELECT CATEGORIES AND FILTER CONNECTIONS*/
// Declare variables
var inputSelectCat = $("input[name=category]"),
inputSelectSubCat = $("input[name=subcategory]"),
arrowDown = inputSelectSubCat.next(),
catNameOld;
// Defaultly setup subcategory input as disable until category is not chosen
inputSelectSubCat.addClass('stop');
// Disable placeholder hidding - disable focus event
inputSelectSubCat.on('mousedown', function() {
event.preventDefault();
});
// Defaultly hide arrowdown of input subcategory until category is not chosen
inputSelectSubCat.next().hide();
inputSelectCat.on('focusin', function() {
catNameOld = $(this).val();
});
localStorage.clear();
// If change value of category then change options of subcategory
inputSelectCat.on('focusout', function() {
var catNameNew = $(this).val(),
arrowDown = inputSelectSubCat.next();
// Send cat id to add.php to change select options in html according to cat id
$.ajax({
url: 'add.php',
type: 'post',
data: {
cat_name_js: catNameNew
}
}).done(function(html) {
var subCatMenuNew = $(html).find('select[name=subcategory]'),
subCatMenuCurrent = $('#section-info').find('select[name=subcategory]');
// Replace current select by new one - data for dropdown list are loaded from select
subCatMenuCurrent.html(subCatMenuNew);
})
// Allow subcategory input always if category is chosen and value is not empty
if (catNameNew !== '') {
arrowDown.show();
inputSelectSubCat.removeClass('stop');
}
// If different category is chosen, then clear input value
if (catNameOld !== catNameNew) {
inputSelectSubCat.val('');
}
});
// If change value of category then change options of subcategory
inputSelectSubCat.on('focusout', function() {
$('#filters, #section-filters').show();
});
/* SELECT REPLACED BY DIV JS */
var inputSelect = $('.add-item__input-select');
// Add new div with options after click on select
inputSelect.on('click', function(event) {
event.preventDefault();
var currentNewDropdown = $(this).next(),
currentInput = $(this),
currentSelect = $(this).parent().find('select');
// Do not allow to add dropdown list for subcategory if it has class 'stop'
if ( !currentInput.hasClass('stop')) {
// Check if new div dropdown already exists if not add new one
if ( !currentNewDropdown.hasClass('add-item__custom-select-box') ) {
var newDropdown = $('<div/>') // create new div element
.addClass('add-item__custom-select-box') // with class NewDropdown
.insertAfter($(this)); // and append it to page
}
}
// If select was already clicked on, then do not create new dropdown list
if ( !currentInput.hasClass('added') ) {
// Check each option value and attach it to new dropdown as div
currentSelect.find('option').each(function(index, element) {
var option = $(this); // this is the option from the original select
currentNewDropdown = $(this).parent().next();
// If option is disabled do not append it to new dropdown list
if (!option.prop('disabled')) {
// Create dropdown list as copy of original select list
var newOption = $('<div/>') // create new div element
.addClass('add-item__custom-select-box-items') // with class NewDropdown-item
.html(option.html()) // copy content from original option
.data('value', option.val()) // copy value from original option
.appendTo(newDropdown); // append it to the new dropdown
}
})
// Show new dropdown options after click on select
if ( !currentInput.hasClass('stop')) {
currentNewDropdown = $(this).next();
currentNewDropdown.show();
currentInput.addClass('added');
}
}
});
// Remove dropdown list if focusout without value chosen
inputSelect.on('focusout', function() {
console.log('2');
var newDropdown = $(this).parent().find('.add-item__custom-select-box'),
inputValue = $(this).val();
newDropdown.remove();
inputSelect.removeClass('added');
inputSelect.addClass('black-text');
});
// Add value of clicked element to original option
$('.add-item__input-wrapper').on('mousedown','.add-item__custom-select-box-items', function() {
var clickedOptionText = $(this).text(), // Get choosen otion text
clickedOptionVal = $(this).data('value'), // Get choosen option value
currentInput = $(this).parent().prev(),
currentSelect = $(this).parent().parent().find('select'),
newDropdown = $(this).parent();
currentSelect.val(clickedOptionVal); // Set up value of original select
currentInput.val(clickedOptionText); // Show chosen value in input
newDropdown.remove();
inputSelect.removeClass('added');
inputSelect.addClass('black-text');
});

How to validate a memorized value in an input box

I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.

I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});

How to know with jQuery that a "select" input value has been changed?

I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});

First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});​
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});​

You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change

how to disable a dropdown item after its been selected

i have a regular combobox and i am listening to the change event and sticking the selected value in an html table. this all works fine but there is one issue. Right now, the user can select the same item more than once (which i dont want to allow).
At the point of where an item is selected, i want to:
Capture the value and stick it in the table (which i am doing now and code is below)
<script type="text/javascript">
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0) {
addRowToTable(this.value);
}
});
}
And i am trying to figure how to do #2 and #3 below . .
reset the selectedindex back to 0 (which says "Please select . .")
Not allow that selection to be selected again (and any visual representation on disabling that dropdown item).

Number 1 is pretty simple:
$('#categories option:first').get(0).selectedIndex = 0;
You can also use the value of the option against the dropdown list like so:
$('#categories').val('myOptionValue');
To prevent an item from being selected a second time, I would remove it from the dropdown list with something like this:
$('#categories option[value=valueToRemove]').remove();

cballou's answer sets #rel="disabled" on the select element, which causes the "single selection allowed bug".
I would tweak it to look like the below code. Also, I'd recommend setting a class instead of using the rel attribute. That way you add styles (browser permitting) that indicate to the user that the option is disabled.
CSS:
#categories .disabled { background:#c00; }
JS:
$(document).ready(function() {
$('#categories').change(function() {
var selectedIndex = this.selectedIndex,
selection;
if ( selectedIndex !== 0 ) {
selection = $(this.options[selectedIndex]);
if( !selection.hasClass('disabled') ) {
addRowToTable(this.value);
selection.addClass('disabled');
}
}
// reset selected index
$(this).val('');
});
});

OK if i were you i wouldnt use a Drop down box for this... i would use multiple <select multiple="true"> which is going to allow you to select multiple items at a time by using ctrl+click (cmd+click on mac), then i would have an add button to click when done. this would fire the js taht would grab all the selected options put em in your table or what have you and then then remove them from the select box.
http://www.w3schools.com/TAGS/att_select_multiple.asp

You could add a rel="disabled" attribute to the option and check for it like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).attr('rel', 'disabled');
}
});
});
If your first option (selectedIndex 0) has an empty value, you can easily reset like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).find('option:selected').attr('rel', 'disabled');
}
// reset selected index
$(this).val('');
});
});

Using JavaScript or jQuery, how do I check if select box matches original value?

Just wondering if there is any way to check if the value of a select box drop-down matches the original value at the time of page load (when the value was set using selected = "yes") ?
I guess I could use PHP to create the original values as JavaScript variables and check against them, but there are a few select boxes and I'm trying to keep the code as concise as possible!

That's not too hard at all. This will keep track of the value for each select on the page:
$(document).ready(function() {
$("select").each(function() {
var originalValue = $(this).val();
$(this).change(function() {
if ($(this).val() != originalValue)
$(this).addClass('value-has-changed-since-page-loaded');
else
$(this).removeClass('value-has-changed-since-page-loaded');
});
});
});
This will apply a new class value-has-changed-since-page-loaded (which presumably you'd rename to something more relevant) to any select box whose value is different than it was when the page loaded.
You can exploit that class whenever it is you're interested in seeing that the value has changed.

$(document).ready(function() {
var initialSelectValue = $('#yourselect').val();
// call this function when you want to check the value
// returns true if value match, false otherwise
function checkSelectValue() {
return $('#yourselect').val() === initialSelectValue;
}
});
PS. You should use selected="selected" not selected="yes".

On page load, create an array with the initial value of each select box indexed by name:
var select_values = [];
$(document).ready(function() {
$("select").each(function() {
select_values[$(this).attr('name')] = $(this).val();
});
});
later when you need to check if a value has changed:
function has_select_changed(name) {
return $("select[name="+name+"]").val() != select_values[name];
}

First, a snippet:
$('select').each(
function(){
if( this.options[ this.selectedIndex ].getAttribute('selected') === null ){
alert( this.name +' has changed!')
}
});
Now the explanation:
Assuming selectElement is a reference to a <select /> elementYou can check which option is selected using
selectElement.selectedIndex
To get the <option /> element which is currently selected, use
selectElement.options[ selectElement.selectedIndex ]
Now when you know which option element is selected you can find out if this element has the selected='selected' attribute (as in the source code, it doesn't change - this is not the same as .selected propery of a DOM node, which is true for the currently selected option element and changes when the selection is changed)