Related dropdown menu issue - javascript

I'm polishing up a bit of jquery I wrote that works on 2 dropdown boxes. Basically, when the first dropdown is changed, it filters the second dropdown to show only the applicable choices. If the first choice (value: "none|") is chosen in the first dropdown, it shows no choices in the second
It works great, most of the time. Here's the issue: If you select the first choice in the first dropdown, the second dropdown clears out. But if you then choose another option in the first dropdown, the second stays empty when it shouldn't.
I'd appreciate if you can help me figure this out. You can find the dropdown boxes here: http://goinspire.com/jwrp-hotel-registration/.
PS: If it makes a difference (but I think it doesn't), it's a WordPress site and the form is generated by GravityForms.
PS: here's the code:
tripFilter = function () {
var tripClass = '.hotel-trip select',
hotelClass = '.hotel-name select',
unusedClass = '.unused-options select';
jQuery(tripClass).change(function(){
//testFunc();
var tripSelect = jQuery(tripClass),
trip = tripSelect.val(),
hotelSelect = tripSelect.parents('form').find(hotelClass);
if (trip === "none|"){
jQuery(hotelClass+" > option").each(function() {
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
});
} else {
tripnum = trip.match(/JWRP (\d*)/)[1];
//var hotelChoices = [];
jQuery(unusedClass+" > option").each(function() {
jQuery(this).clone().appendTo(hotelClass);
jQuery(this).remove();
});
jQuery(hotelClass+" > option").each(function() {
hotelMatch = jQuery(this).val().match(/(\d*) /);
//console.log(hotelMatch);
if (hotelMatch === null || hotelMatch[1] != tripnum){
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
//console.log("not a match!");
};
});
}
});
};
jQuery(document).ready(function () {
tripFilter();
});
jQuery(document).bind('gform_post_render', function(event, form_id){
if(form_id == 38) {
tripFilter();
}
});

If I have understood properly, first dropdowm guides second.
So, I think you might just add a listener on "change" event of first dropdown, to perform your function every time the value of first input goes through some change.
Try this way:
$(document).ready(function(){
$('#38').bind('change', tripFilter)
});

Related

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

How to get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

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

How to integrate sumoselect?

My js skills are very low, so sorry for this question. I need a multiselect to filter my boxes. The sumoselect plugin looks smart and I am able to run it, but I don´t know how to integrate it to my boxes. For example, if I select "Volvo & Mercedes" at my multiselect, I want that the other boxes fade out. At deselection all boxes are shown.
That´s my current status:
}(jQuery));
$(document).ready(function () {
$('.select').on('change', function(e) {
console.log($(this).val()) // value
}).SumoSelect({})
$('#submit').click(function(e){
e.preventDefault();
var v = $('#uq').val();
alert(v);
});
});
The Fiddle
Thanks for your help.
If you modify the box html a bit to include the values of the <select>
<span class="box" data-select_match="bmw">BMW</span>
Then you can filter the boxes based on the added attribute:
var $boxes = $('.box');
$('.select').on('change', function(e) {
var selected = $(this).val();
if(!selected ){
$boxes.show()
}else{
$boxes.hide().filter(function(){ // hide boxes then filter what gets shown
var select_match = $(this).data('select_match');
return selected.indexOf(select_match) > -1;
}).show();
}
}).SumoSelect({})
DEMO

Improving use of radio buttons to enable/disable form fields

I have two radio buttons, and two corresponding form fields. Depending on which radio button is selected, one form field gets disabled and the other gets enabled.
My code works, but I think it can be improved. Right now I have two separate processes. One checks to see which radio button is selected when the page loads and disables the appropriate field. The other responds to changes by the user after the page has loaded. I believe it can be simplified but I don't know how.
$(document).ready(function() {
if ($("#element_link_link_type_internal").is(':checked')) {
$("#element_link_url").attr("disabled","disabled");
} else {
$("#element_link_page_id").attr("disabled","disabled");
}
});
$(document).ready(function() {
$("#element_link_link_type_internal").click(function(){
$("#element_link_page_id").attr("disabled","");
$("#element_link_url").attr("disabled","disabled");
}),
$("#element_link_link_type_external").click(function(){
$("#element_link_page_id").attr("disabled","disabled");
$("#element_link_url").attr("disabled","");
});
});
Thanks!
You can test the checked state within the onchange handler, and simply invoke the onchange handler (which I believe you should be using instead of onclick) once when the page loads:
$(document).ready(function() {
$("#element_link_link_type_internal").change(function() {
$("#element_link_page_id").attr("disabled", !this.checked);
$("#element_link_url").attr("disabled", this.checked);
}).change(); // invoke once to set up initial state
});
This is untested and based on your comments/answer:
jQuery < 1.6:
$(document).ready(function() {
var $type = $('input[name="element_link[link_type]"]'),
$pageId = $("#element_link_page_id"),
$url = $("#element_link_url");
$type.change(function() {
if ($type.filter(":checked").val() === "internal") {
$pageId.removeAttr("disabled");
$url.attr("disabled", "disabled");
} else {
$url.removeAttr("disabled");
$pageId.attr("disabled", "disabled");
}
}).change();
});
jQuery >= 1.6
$(document).ready(function() {
var $type = $('input[name="element_link[link_type]"]'),
$pageId = $("#element_link_page_id"),
$url = $("#element_link_url");
$type.change(function() {
var isDisabled = ($type.filter(":checked").val() === "internal");
$pageId.prop("disabled", !isDisabled);
$url.prop("disabled", isDisabled);
}).change();
});
#karim79, your answer got me started but it didn't work when the 2nd radio button was selected. It only worked when the 1st radio button was selected.
I came up with this, and it seems to do the trick. I'd welcome anyone to offer additional improvements though. JavaScript blows my mind.
$(document).ready(function() {
$("input[name='element_link[link_type]']").change(function() {
var v = $("input[name='element_link[link_type]']:checked").val()
$("#element_link_page_id").attr("disabled", v == 'internal' ? "" : "disabled");
$("#element_link_url").attr("disabled", v == 'internal' ? "disabled" : "" );
}).change(); // invoke once to set up initial state
});

Categories