CODEWITHSUNDEEP
javascriptphpjquery
Bakti Wijaya
Bakti Wijaya

Reputation: 477

Dynamically multiplying values inside loop using Jquery

i have 1 fields of input type...and if i changed the value,it will multiplied the values on the loop..here is the example...

<input type='number' id='values' name='values' onkeyup='multiplied()'>
<?php 
   foreach($data as $value)
   {
     $no = 1;
     echo "<input type='number' class='form-control value' id='value' name='value' readonly value=".$value['value'].">";
     echo "<input type='number' class='form-control' id='total' name='total' readonly >";
     $no++;
   }

?>

function multiplied()
{
  var values = $('#values').val();
  var value = $('.value').val();
  total = values * value;
  $('#total').val(total)
}

how do i multiplied values dynamically when i change the values of id='values'
Thank you,any helps will be appriciated

Upvotes: 0

Views: 1096

Answers (2)

Tomasz W.
Tomasz W.

Reputation: 422

You can use jquery on function.

$(document).on('change', '#values', function() {
        var values = $("#values").val();            
        $(".value").each(function(index, element){
            values *= element.value;                 
            $(this).next('input#total').val(values);
        });
});

Upvotes: 1

B. Desai
B. Desai

Reputation: 16446

Dont use same id multiple times. Use class instead. Also you have to loop through element when you have to change value

change

echo "<input type='number' class='form-control' id='total' name='total' readonly >";

to

echo "<input type='number' class='form-control total' name='total' readonly >";

And in script

<script>
function multiplied()
{
  var values = $('#values').val();
  $( ".value" ).each(function() {
      var value = $(this).val();
      total = values * value;
      $(this).next('input').val(total);
});

}
</script>

Also make sure you total input field is exactly next after value input field

OR you can also use nextAll with class name if total input field is not exactly next after value input field

<script>
function multiplied()
{
  var values = $('#values').val();
  $( ".value" ).each(function() {
      var value = $(this).val();
      total = values * value;
      $(this).nextAll('.total').val(total);
});

}
</script>

Upvotes: 0

Related Questions