Javascript onchange for select work only on first item in php loop

Question

I have an HTML select with javascript onchange="update_price(this)", but it is under while loop in php, which means I can have many select depending on the number of the item being looped. each selected item is supposed to give a specific value for each of them, however, javascript only return the first item selected and neglected others.

I have learnt that id doesnt work under loops, can someone shed light to this or give a proper solution

this is my code.

my php

<?php foreach($_SESSION['product_cart'] as $data){
          //    $sum+= $data;

          $total_price += $data['price'];  //total credit unit
          $total_fee += $data['coursefee'];  //total fee
            ?>
              <li style="  margin: 10px 10px;">
                  <span class="item">
                    <span class="item-left" style="color:#0000" >
                        <img src="upload/<?php echo $data['image']; ?>" alt="" style="width:70px;" />
                        <span class="item-info" style="color:#000;display: inline-block;" >
                            <span><?php echo $data['title']; ?></span>
                            <span>
                              <div class="form-group ">
                <select  name="enrolledterm[]" data-placeholder="Select term..." class="chosen-select" multiple tabindex="4" onchange="update_price(this)" id="dropdown">
               <option><?php echo $data['term']; ?></option>
                </select>
              </div>



            </span> 
         Credit Unit :  <input type="text" id="totaldiscount"  readonly="readonly" name="creditcharged" readonly="readonly" /><br>
        Credit Unit :  <input type="text" id="totaldiscount2"  readonly="readonly" name="creditcharged" readonly="readonly" />               </span>
                    </span>
                    <span class="item-right">
                        <button class="btn btn-xs btn-danger pull-right" onclick="remove_cart('<?php echo $data['p_id']; ?>')" >x</button>
                    </span>
                </span>
              </li>
          <?php   } ?>

And below is my javascript

     <script type="text/javascript">
function update_price(e) {
  var price = 0;                          
  $('option:selected', $(e)).each(function() {
    console.log($(this).data('price'));
    // sum price for selected items
    price += $(this).data('price') ;
  });
  $('#total').val(price);

   if ($('option:selected').length == 3){
     discountprice = price - (price * <?php echo ($data['discount'] * 0.01); ?>);
      $('#totaldiscount').val(discountprice);
    } else { discountprice = price;
     $('#totaldiscount').val(discountprice);  }

      discountprice = price;
     $('#totaldiscount2').val(discountprice);
}
</script>

[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Apr 11 '18 at 11:53

score -1 · Answer 1 · answered Apr 11 '18 at 11:59

<?php foreach($_SESSION['product_cart'] as $data){
          //    $sum+= $data;

          $total_price += $data['price'];  //total credit unit
          $total_fee += $data['coursefee'];  //total fee
            ?>
              <li style="  margin: 10px 10px;">
                  <span class="item">
                    <span class="item-left" style="color:#0000" >
                        <img src="upload/<?php echo $data['image']; ?>" alt="" style="width:70px;" />
                        <span class="item-info" style="color:#000;display: inline-block;" >
                            <span><?php echo $data['title']; ?></span>
                            <span>
                              <div class="form-group ">
                <select  name="enrolledterm[]" data-placeholder="Select term..." class="chosen-select" multiple tabindex="4" id="dropdown">
               <option><?php echo $data['term']; ?></option>
                </select>
              </div>



            </span> 
         Credit Unit :  <input type="text" id="totaldiscount"  readonly="readonly" name="creditcharged" readonly="readonly" /><br>
        Credit Unit :  <input type="text" id="totaldiscount2"  readonly="readonly" name="creditcharged" readonly="readonly" />               </span>
                    </span>
                    <span class="item-right">
                        <button class="btn btn-xs btn-danger pull-right" onclick="remove_cart('<?php echo $data['p_id']; ?>')" >x</button>
                    </span>
                </span>
              </li>
          <?php   } ?>

Use this javascript

 <script type="text/javascript">
    function update_price(e) {
      var price = 0;                          
      $('option:selected', $(e)).each(function() {
        console.log($(this).data('price'));
        // sum price for selected items
        price += $(this).data('price') ;
      });
      $('#total').val(price);

       if ($('option:selected').length == 3){
         discountprice = price - (price * <?php echo ($data['discount'] * 0.01); ?>);
          $('#totaldiscount').val(discountprice);
        } else { discountprice = price;
         $('#totaldiscount').val(discountprice);  }

          discountprice = price;
         $('#totaldiscount2').val(discountprice);
    }

$('#dropdown').on('change',function(){
  update_price(this);
})
</script>

It would be helpful to explain what you have changed and why, the OP will most likely just copy paste and not learn anything — Lara Croft, Apr 11 '18 at 12:19
i tried it and its not working, kinly explain the changes made, so we can all learn — Ademaintain, Apr 11 '18 at 12:21
I have added $('#dropdown').on('change',function(){ update_price(this); }) If this is not working then try with $(document).on('change','#dropdown',function(){ update_price(this); }) You are using inline code which is a very old process. — Poorna Rao, Apr 12 '18 at 11:57
@PoornaRao, Thanks and this is a progress made, the the first select is only working while others are not working at all — Ademaintain, Apr 19 '18 at 12:11

Javascript onchange for select work only on first item in php loop

1 Answers1