Dynamically multiplying values inside loop using Jquery

Question

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

It would be useful and easier to help if you'd posted the generated HTML as opposed to PHP! — lshettyl
– lshettyl, Commented Oct 7, 2017 at 12:02

Tomasz W. · Accepted Answer · 2017-10-07 13:28:31Z

1

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);
        });
});

edited Oct 7, 2017 at 13:28

answered Oct 7, 2017 at 11:57

Tomasz W.

4143 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roko C. Buljan Over a year ago

Wrapping this back into a jQuery constructor just to get a value? Use this.value instead.

Tomasz W. Over a year ago

@RokoC.Buljan I've edited my code, is that you meant ? I could shorten my code by one line.

B. Desai · Accepted Answer · 2017-10-07 12:01:55Z

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>

Collectives™ on Stack Overflow

Dynamically multiplying values inside loop using Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related