I'm new to jQuery, but have built a form which gives the user options to choose from which at the end displays a button with a link to a course.
When you use the form, the first few clicks are fine, but then if you try and change the course, the location dropdown freezes and does not allow you to make a selection - it doesn't happen straight away, but after a few clicks.
Can anyone work out why this maybe? I've been looking for ages but I think i've exhausted all options for my skill level.
I think its something to do with one of these areas I've commented as: 5. Showing Options within select 2. Resetting Fields 1. Resetting Fields
$(function() {
$(".location").change(function() {
//0. Var & Let
var age = $(".age").val();
var subject = $(".subject").val();
var location = $(".location").val();
let age_select = $("#age_select");
let subject_select = $("#subject_select");
let area_select = $("#area_select");
// 1. Resetting Fields
age_select.on("change", function() {
let currentCol = jQuery(this).val();
// When age is changed reset other dropdown (by setting value to the default one)
// and trigger change for the event handler to be called
subject_select.attr("data-column", currentCol).val('subject-fill');
area_select.attr("data-column", currentCol).val('location-fill');
});
//2. Resetting Fields
// if subject is changed reset location and trigger change
subject_select.on("change", function() {
area_select.val('location-fill').trigger('change');
});
//3. Hiding Buttons
area_select.on("change", function() {
let currentLocation = jQuery(this).val();
let subject = subject_select.val();
// If dropdown change is triggers then check if it is default value
// if so then hide links
if (currentLocation == 'location-fill') {
$('#sbcox-ge,#sbcox-ss,#sbcan-ge,#sbcan-el,#sbcan-ir,#sbcan-ge,#sbcan-ib,#sbcan-im,#sbcan-stem,#sbcan-b,#head-ge, #head-ss, #head-coding, #head-gyl, #eton-ge, #eton-ss, #eton-maths, #eton-human, #eton-stem, #well-ge, #well-b, #well-ib, #well-ie, #well-maths, #well-science, #oc-ge, #oc-bl, #oc-e, #oc-med, #oc-ns, #oc-pe, #cc-bl, #cc-ir, #cc-law, #cc-med').toggle(false);
return;
}
});
//4. Condtiional Logic for Buttons
if (age =="col1"&& subject =="col1_ge"&& location =="col1_sbco") {
$("#sbcox-ge").toggle();
$("#button-overall").toggle(false);
} else if (age =="col1"&& subject =="col1_ss"&& location =="col1_sbco") {
$("#sbcox-ss").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_ge"&& location =="col2_sbco") {
$("#sbcox-ge").toggle();
$("#button-overall").toggle(false);
$("#sbcan-ge").toggle(false);
} else if (age =="col2"&& subject =="col2_ge"&& location =="col2_sbcc") {
$("#sbcan-ge").toggle();
$("#button-overall").toggle(false);
$("#sbcox-ge").toggle(false);
} else if (age =="col2"&& subject =="col2_ss"&& location =="col2_sbco") {
$("#sbcox-ss").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_el"&& location =="col2_sbcc") {
$("#sbcan-el").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_b"&& location =="col2_sbcc") {
$("#sbcan-b").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_stem"&& location =="col2_sbcc") {
$("#sbcan-stem").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_itm"&& location =="col2_sbcc") {
$("#sbcan-im").toggle();
$("#button-overall").toggle(false);
} else if (age =="col2"&& subject =="col2_itr"&& location =="col2_sbcc") {
$("#sbcan-ir").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_ge"&& location =="col3_sbco") {
$("#sbcox-ge").toggle();
$("#button-overall").toggle(false);
$("#sbcan-ge").toggle(false);
} else if (age =="col3"&& subject =="col3_ge"&& location =="col3_sbcc") {
$("#sbcan-ge").toggle();
$("#button-overall").toggle(false);
$("#sbcox-ge").toggle(false);
} else if (age =="col3"&& subject =="col3_ss"&& location =="col3_sbco") {
$("#sbcox-ss").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_el"&& location =="col3_sbcc") {
$("#sbcan-el").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_b"&& location =="col3_sbcc") {
$("#sbcan-b").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_stem"&& location =="col3_sbcc") {
$("#sbcan-stem").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_itm"&& location =="col3_sbcc") {
$("#sbcan-im").toggle();
$("#button-overall").toggle(false);
} else if (age =="col3"&& subject =="col3_itr"&& location =="col3_sbcc") {
$("#sbcan-ir").toggle();
$("#button-overall").toggle(false);
} else {
$("#button-overall").toggle();
}
});
//5. Showing Options within select
//Shows options within a select when relevant, done by numbering
$("#subject_select").children('option:gt(0)').hide();
$("#area_select").children('option:gt(0)').hide();
$("#age_select").change(function() {
$("#subject_select").children('option').hide();
$("#subject_select").children("option[value^=" + $(this).val() + "]").show();
$("#area_select").children('option').hide();
$("#area_select").children("option[value^=" + $(this).val() + "]").show();
});
})
//6. Hiding Locations fields if not needed
//Below hides schools/locations from dropdowns when not needed
$(document).ready(function(){
$("#age_select").change(function(){
hideOption();
});
$("#subject_select").change(function(){
hideOption();
});
});
function hideOption(){
var age=$("#age_select").val();
var subject=$("#subject_select").val();
if (age =="col2"&& subject =="col2_ss") {
$("#area_select [value='col2_sbcc']").hide();
}
else if (age =="col2"&& subject =="col2_el" || age =="col2"&& subject =="col2_b" || age =="col2"&& subject =="col2_stem" || age =="col2"&& subject =="col2_itm" || age =="col2"&& subject =="col2_itr") {
$("#area_select [value='col2_sbco']").hide();
}
else if (age =="col3"&& subject =="col3_ss") {
$("#area_select [value='col3_sbcc']").hide();
}
else if (age =="col3"&& subject =="col3_el" || age =="col3"&& subject =="col3_b" || age =="col3"&& subject =="col3_stem" || age =="col3"&& subject =="col3_itm" || age =="col3"&& subject =="col3_itr") {
$("#area_select [value='col3_sbco']").hide();
}
else {
}
}.inner-modal {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="decider-form"><div class="container"><div class="row"><div class="col-lg-3 col-md-12 col-sm-12"><select name="age_select" id="age_select" class="age"><option value="age-fill">1. Age</option><option value="col1">8</option><option value="col1">9</option><option value="col1">10</option><option value="col2">11</option><option value="col3">12</option></select></div><div class="col-lg-3 col-md-12 col-sm-12"><select name="subject_select" id="subject_select" class="subject" data-column=''><option value="subject-fill">2. Subject</option><!--COL 1 (8,9,10)--><option value="col1_ge">ge</option><option value="col1_ss">ss</option><!--COL 2 (11)---><option value="col2_b">bus</option><option value="col2_el">el</option><option value="col2_ge">ge</option> <option value="col2_itr">ir</option><option value="col2_itm">im</option><option value="col2_stem">stem</option><option value="col2_ss">ss</option><!--COL 3 (12)--><option value="col3_b">bus</option><option value="col3_el">el</option><option value="col3_ge">ge</option> <option value="col3_itr">ir</option><option value="col3_itm">im</option><option value="col3_stem">stem</option><option value="col3_ss">ss</option></select></div><div class="col-lg-3 col-md-12 col-sm-12"><select name="area_select" id="area_select" class="location" data-column=''><option value="location-fill">3. Location</option><!--COL 1 (8,9,10)--><option value="col1_sbco">sbcox</option><!--COL 2 (11)---><option value="col2_sbco">sbcox</option><option value="col2_sbcc">sbcca</option><!--COL 3 (12)---><option value="col3_sbco">sbcox</option><option value="col3_sbcc">sbcca</option></select></div><div class="col-lg-3 col-md-12 col-sm-12" id="button-overall"><div class="call-to-action"><a class="call-action" href="#">See Your Course</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcox-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ge</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcox-ss"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ss</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ge</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-el"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See el</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-b"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See bus</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-ir"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ir</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-im"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See im</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="sbcan-stem"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See stem</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="head-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ge</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="head-ss"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ss</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="head-coding"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See coding</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="head-gyl"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See gyl</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="eton-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ge</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="eton-ss"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ss</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="eton-maths"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See maths</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="eton-human"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See h</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="eton-stem"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See stem</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ge</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-b"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See bus</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-ib"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ib</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-ie"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See ie</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-maths"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See maths</a></div></div><div class="col-lg-3 col-md-12 col-sm-12 inner-modal" id="well-science"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See sci</a></div></div></div><!--End Row--></div><!--End Container--></div><!--End Decider Form-->