We Keep Coding

Display Error Message For Select If Expand Then Closed Without Selection Made In JQuery

I have a select and i'm after displaying an error message as soon as the user expands the select and closes it without making a selection but i cant figure how to do this.
I have it validating on.change if the val matches the default as shown below
Working JQuery When An Option Is Selected
$('#orderPosition').change(
function () {
if ($('#orderPosition').val() == 'orderPositionDefault') {
$('#orderErrorMessage').show();
$('#orderPosition').focus();
$('#orderPosition').css("background-color", "lightcoral");
} else {
$('#orderErrorMessage').hide();
$('#orderPosition').css("background-color", "transparent");
}
}
);
I have tried the following
$('#orderPosition').on('click', function () {
// var isDirty = !this.options[this.selectedIndex].defaultSelected;
var changed = $(this).val() != $(this).data('orderPositionDefault');
alert(changed ? 'changed' : 'not changed');
if (changed) {
$('#orderErrorMessage').show();
} else {
$('#orderErrorMessage').hide();
}
});
But the issue with the above is as soon as i click in the select the error message is displayed, i need it to be displayed of the user clicks in it and closes it straight away without making a selection.

Use the blur event for executing code when focus leaves on an input field.
$('select').on('change', function() {
//change things here
}).on('blur', function() {
//when select is no longer in focus here
});
Documentation: https://www.w3schools.com/tags/ev_onblur.asp

select value to show another hidden dropdown box

I got this code for a website I am working on, but it does not work:
$(document).on('change', 'select[name="Discount"]', function() {
var $select = $(this);
var $partnerBlock = $select.closest('.col-md-2').siblings('.partner');
if ($select.val() === 'Yes') {
$partnerBlock.addClass('show');
} else {
$partnerBlock.removeClass('show');
}
});
What I want is hide the Partner dropdown by default, hiding it from everyone, and show it only when user set Discount to "Yes".

Hide it by default and then use an event listener on the change event for the dropdown.
https://jsfiddle.net/mco1sxcb/
You should use ids for your elements, easier to manipulate them.

Hide dropdown duplicates when originally hidden

I am successfully using the blow code to remove duplicate values from a drop down field
$(document).ready(function () {
var usedNames = {};
$("select > option").each(function () {
if (usedNames[this.value]) {
$(this).remove();
} else {
usedNames[this.value] = this.text;
}
});
});
My problem is that some of my drop downs are conditional, so they are not on the page when the code fires, they are set to display:hidden, and input hidden, then depending on a previous drop down selcect they are shown.
So how can I fire the code when the drop down appears??

If you have no ability to add code where the dropdown is being set to visible, your only solution may be to set a repeating timer to constantly check.
var interval = setInterval(function(){
// Check to see if the thing is still hidden
if(!$("#id_of_option").is(':hidden')){
clearInterval(interval); // stop checking
// Run your other code here to clear out duplicates
}
}, 200); // or some number of milliseconds

Jquery checkbox on select add a name attribute and increment on more than one selection

Ok,i am building a fantansy football game using codeigniter , Grocery CRUD and Jquery. I have a view where user select 15 players from checkboxes where i will use the name attribute to select GK1,GK2,DEF1,DEF2,DEF3,DEF4,DEF5,MID1,MID2,MID3,MID4,MID5,FWD1,FWD2 and FWD3 and pass their value to the controller. My question is , how do i create a javascript Jquery Code for maybe Midfielders (MID) in such a way that when a user click the first Midfielder the javascript append input name="MID1" and on checking another box it becomes input name="MID2" without changing the name for MID1. So far i the javascript is working but when i click another player the name value changes in all players also if i deselect the name player for that particular player doesnt remove. Here is my JS..
<script>
$(document).ready(function(){
$(".gk").change(function() {
var number=$('[class="gk"]:checked').length;
if(this.checked) {
$(".gk").each(function() {
$(".gk").attr('name',"GK"+number);
});
} else {
$('.gk').attr('name', number);
}
});
});
</script>
and here is my view
<input type="checkbox" class="gk" value="<?=$row->playerID ?>" > <?= $row->playerID?> </input>

Regarding your issue of all players having their name changed, the culprit may be '.each()'. Isn't it supposed to be more like :
$(".gk").change(function() {
if(this.checked) {
var number=$('[class="gk"]:checked').length;
// $(".gk").each(function() {
$(this).attr('name',"GK"+number);
// });

Among other things, you have a problem when you deselect the players, since you are only running that piece of code that updates the name when the $(".gk") is checked... also, in order to add a different number to each one, you'll have to increment an index value, for example, and add it to the name, not the variable number, which will be the size of the selected elements... On top of this, the last variable "number" should be outside of the "if" otherwise you won't see it in the else...
Check this, see if it helps
$(document).ready(function(){
$(".gk").change(function() {
var checked=$('[class="gk"]:checked').length;
alert("You have "+checked+" Gks checked")
var index = 1;
$(".gk").each(function() {
if($(this).prop('checked')){
$(this).attr('name',"GK"+index);
alert("Getting GK "+index)
alert("this GK name is "+$(this).attr('name')
index++;
}
else {
$('.gk').attr('name',"");
}
});
});
});
http://jsfiddle.net/xn3P9/5/
Once you update the name it won't show on the page inspector.
You final solution should be this:
$(document).ready(function(){
$(".gk").change(function() {
var index = 1;
$(".gk").each(function() {
if($(this).prop('checked')){
$(this).attr('name',"GK"+index);
index++;
}
else {
$('.gk').attr('name',"");
}
});
});
});

I still have a hard time understanding what you are looking for but maybe it is something similar to this:
$(document).ready(function(){
$(".gk").change(function() {
$(".gk:checked").each(function(index, gk) {
//Will give each selected GK a unique name
$(".gk:checked").attr("name", "GK"+index);
});
});
});

Remove the selected item from a Kendo UI Multiselect Element

I got two Kendo ui multiselect elements on my page to select stores from a list. On the select event I have a function call where I check if the selected store is in another list.
If the selected item is already assigned to the other list i prompt a confirm. When the user click ok, then is ok, when clicks cancel i have to remove the selected item from the multiselect element.
Here is my function:
function checkStoreSelection(e) {
var selectedStore = this.dataSource.view()[e.item.index()];
var selectedStoreId = selectedStore.Id;
$.each(surveysData, function (index, surveyVal) {
// get each store
$.each(surveyVal.Stores, function (storesIndex, storesVal) {
// check if a store already assigned to another survey
if (selectedStoreId == storesVal.DBId) {
var answer = confirm('Some text here ... ');
if (answer) {
// nothing todo here
} else {
// have to remove the selected item
}
}
});
});
};

You can remove item from datasource dataSource.remove(item);
Check this example
http://jsfiddle.net/derickbailey/D4g8S/

Damn fool - Simple answer:
e.preventDefault();
Does what I need :-/
I´am sorry.