Can the values in local storage be used to verify age? - forms

Question

I am looking for some help with my verification code. I am looking for a simple method to verify two ages. There is a "from age" and a "to age". I need to make sure that the user selects the ages properly. The "from age" should be younger than the "to_age. I made a script and it kind of works. The problem is it does not work consistently. I need it to check, when you select the "from_age" dropdown as well as the "to_age" dropdown. This one seems to only work with one of the dropdowns and one time through. It does not work when the page loads and it sometimes doesn't work at all. I tried two options but neither worked. I tried to use localstorage values since another script I have loads the keys and values on change very well. Or I need to try to fix this version which uses the values in the options dropdown. I am not sure which would work better, but I am thinking the localstorage values are the better choice.
I have tried to use the values associated with the keys in localstorage but I failed on getting it to work. The method using the values in the select/options works but works poorly. Please excuse me if I made any mistakes condensing the code for this question. Thanks
jQuery
$(function() {
$('.agefrom_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
});
CSS
.age_warning {
display: none;
}
.age_warning.show_age_warning {
display: block;
position: relative;
float: right;
font-size: 12px;
color: #ff0000;
}
html
<form id="ageselection" method="post" autocomplete="off">
<fieldset>
<ul class="age_preference_text_box fl">
<li><label class="from_to_age_text">from </label>
<select class="age_text agefrom_selection">
<option value="18" selected>18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</li>
<li><label class="from_to_age_text">from </label>
<p class="age_warning"> "to" age must be equal <br>or higher than "from" age</p>
<select class="age_text ageto_selection">
<option value="18" selected>18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</li>
</ul>
</fieldset>
</form>
I expected the warning to show on every instance(or disappear). If you change the from_age dropdown, when you change the to_age dropdown, when you modify either dropdown, if you refresh the page, and if you manipulate any dropdown after a page refresh. My code is poorly written and does not work as expected.

Answer 1

I figured it out. The function was only written on one of the dropdown selectors. It needed to be written for both dropdown selectors. The answer will be something like:
$(function() {
$('.agefrom_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
$('.ageto_selection').change(function () {
var quantity_1 = parseInt($('.agefrom_selection').val());
var quantity_2 = parseInt($('.ageto_selection').val());
if ( quantity_1 > quantity_2 ) {
$('.age_warning').addClass('show_age_warning')
}
else {
$('.age_warning').removeClass('show_age_warning')
}
});
If anybody else can come up with something better, I am very willing to listen. Thanks