Sorting and getting the values of multiple html selects with jQuery

Question

I'm programatically generating select's with integer options (from 0 to 18) My aim is to filter the results into separate categories of ages like : infant less than 2 children greater than 2 less than 18 Adult greater or equal to 18



    $('.passengerAge').filter(function (req1) {

    var valbebe = parseInt($(this).val(), 10) <= 2;
         
    return valbebe;
          
    });
    $('.passengerAge').filter(function (req2) {
    var valadulte = parseInt($(this).val(), 10) >= 18;
         
    return valadulte;
          
    });

    $('.passengerAge').filter(function (req3) {

    var valenfant = parseInt($(this).val(), 10) < 18 && parseInt($(this).val(), 10) > 2 ;
         
    return valenfant;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select class="passengerAge" id="select_1" name="select_1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    </select>

The code is working, but only displaying the last returned value. second, i need to display every returned value in hidden and separated text inputs, so i have first to get the values and then push them into inputs.

Any hints ?

@errand well i will try to push the value into text inputs ex if i have 3 children and 2 adults and zero babies it will be : <input type="hidden" name="numAdults" value="2"> <input type="hidden" name="numInfants" value="0"> <input type="hidden" name="numChildren" value="3"> — AhmedC
– AhmedC, Commented Jun 22, 2017 at 11:28
@errand all i need is in this fiddle : jsfiddle.net/d62r26hp 1st step : generate the selects with ages from 0-18 -> working perfectly 2nd step : getting the values -> not working :-) — AhmedC
– AhmedC, Commented Jun 22, 2017 at 11:58

errand · Accepted Answer · 2017-06-22 13:19:06Z

the way you called the .filter() function doesn't work because it gets executed on document ready - even if your count would be correct, it would always return 5 infants (since default value seems to be 0)

i don't understand the way, you allocate the age group variables, like valadulte. either i don't know this shortcut for comparision/allocation statements, or it's just broken. so i did it the long way, using if statements...

first you have to bind an event trigger to your count function, to count the values, when you want them to be counted.

$('.passengerAge').on("change", function(){
  //put age-group counting code here
});

this could be simply on change of any of the select fields, like above or

$('.btnConfirm').on("click", function(){
  //put age-group counting code here
});

be triggered when clicking the confirmation button

second part is the code, to count your age groups. at the beginning of the operation, we reset the values, to be on the safe side

$("input[name='numAdults']").val("0");
$("input[name='numInfants']").val("0");
$("input[name='numChildren']").val("0");

then we cycle through each select box and use if statements to compare the selected value. within the if block, you increment the appropriate value...

 $('.passengerAge').each(function(){ 

 if($("option:selected", this).attr("value") < 2)
 {
     $("input[name='numInfants']").val( function(i, oldval) {
    return ++oldval;
    });
 }

  if($("option:selected", this).attr("value") > 2 && $("option:selected", this).attr("value") < 18)
 {
  $("input[name='numChildren']").val( function(i, oldval) {
    return ++oldval;
    });
 }

if($("option:selected", this).attr("value") == 18)
 {
  $("input[name='numAdults']").val( function(i, oldval) {
    return ++oldval;
    });
 }
});

use your browser inspector to check the hidden fields with your updated fiddle: https://jsfiddle.net/d62r26hp/1/

i can't vote need +15 reputation, so thank you kind sir it works perfectly !

Collectives™ on Stack Overflow

Sorting and getting the values of multiple html selects with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related