displaying different form options based on the combination of previous input values

Question

I´m building a website which is meant to be a store for selling eyeglasses. Users would have to select from two selection type inputs their prescription value for each eye, in order to be able to choose the right lens for them.

I´m trying to find out how to use Jquery/Javascript to compare both eyes values since further options need to be displayed based on the highest one.

This is what I have so far. Each input it´s working independently from the other and i don´t know how to solve that.

 $(function () { $("#selection_1, #selection_2").change(function() { var val = $(this).val(); if(val >="00.00" && val <="01.00" || val <="-01.00" && val >="-00.25" ) { $("#product_b").hide(); } else { $("#product_b").show() }; if(val >="01.25" && val <="02.00" || val <="-02.00" && val >="-01.25" ) { $("#product_a").hide(); } else { $("#product_a").show(); }; }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container "> <div class="form-group col-md-6"> <label class="control-label" for="selection_1">Selection 1</label> <select class="my-form-control" id="selection_1" name="right eye"> <option value="default"disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> <div class="form-group col-md-6"> <label class="control-label" for="selection_2">Selection 2</label> <select class="my-form-control" id="selection_2" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00"selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> </div> <div class="container"> <div id="product_a" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <label class="form-check-label" for="product_a"> Product A </label> </div> <div id="product_b" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="product_b"> Product B </label> </div> </div> 

This is what I need to accomplish: if #selection_1 or #selection_2 is between 1.00 and -1.00, #product_a should be displayed. if #selection_1 or #selection_2 is between 1.00 and 2.00, and between -1.00 and -2.00, #product_b should be displayed.

Here is an example of how they should work together: if selection_1 is between 1.00 and 2.00, and selection_2 is between 1.00 and -1.00, #product_b should be displayed. The highest should be the one to take into consideration.

I hope someone can help me out! thanks

Answer 1

While comparing number values, you need to parse your values to number type, in your case, you should parseFloat() the values before calculation.

From your paragraph, your conditions seemed a little complicated to me, still I tried to implement as much as I understood. Hope this will help you to implement the rest of it according to your needs.

Here is the snippet.

 $(function() { $("#selection_1, #selection_2").change(function() { var val1 = parseFloat($('#selection_1').val()); var val2 = parseFloat($('#selection_2').val()); if ((val1 => -1.0 && val1 <= 1.0) || (val2 >= -1.0 && val2 <= 1.0)) { $('#product_a').show(); $('#product_b').hide(); } if ((val1 >= 1.0 && val1 <= 2.0) || (val2 >= 1.0 && val2 <= 2.0) || (val1 >= -2.0 && val1 <= -1.0) || (val2 >= -2.0 && val2 <= -1.0)) { $('#product_a').hide(); $('#product_b').show(); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container "> <div class="form-group col-md-6"> <label class="control-label" for="selection_1">Selection 1</label> <select class="my-form-control" id="selection_1" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> <div class="form-group col-md-6"> <label class="control-label" for="selection_2">Selection 2</label> <select class="my-form-control" id="selection_2" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> </div> <div class="container"> <div id="product_a" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <label class="form-check-label" for="product_a"> Product A </label> </div> <div id="product_b" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="product_b"> Product B </label> </div> </div>