CODEWITHSUNDEEP
jqueryhtml
AhmedC
AhmedC

Reputation: 27

Sorting and getting the values of multiple html selects with jQuery

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 ?

Upvotes: 0

Views: 48

Answers (1)

errand
errand

Reputation: 980

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/

Upvotes: 2

Related Questions