How to compute perform a javascript/jquery computation using loops from PHP data?

Question

I created a loop in my PHP file that generates 10 rows. Each row has four boxes and below is the grand total.

The scenario is, when the user enters a qty and a price, the total will automatically change using jQuery and the grand total also. And the same with row2. My problem is, I can't access the id from my PHP input fields.

Here's what I did:

for($i = 1; $i < 11; $i++){
    echo "<!-- ITEM {$i} -->";
    echo "<tr>";
       echo "<td><input type='text' name='qty{$i}' class='k-textbox' id='qty{$i}'></td>";
       echo "<td><input type='text' name='item{$i}' class='k-textbox' id='item{$i}'></td>";
       echo "<td><input type='text' name='price{$i}' class='k-textbox' id='price{$i}'></td>";
       echo "<td><input type='text' name='total{$i}' class='k-textbox' id='total{$i}'></td>";
    echo "<tr>";
}
<tr>
   <td>GRAND TOTAL</td>
   <td><input type='text' name='gtotal' value='0.00' id='gtotal' class='k-textbox' />
</tr>

Here's my jQuery code:

var x = 0;

for(x = 1; x < 11; x++){
  $('#qty'+x, '#price'+x).on('input',function() {
     var qty = parseInt($('#qty'+x).val());
     var price = parseFloat($('#price'+x).val());
      $('#total'+x).val((qty * price ? qty * price : 0).toFixed(2));
  });
}

That's all. I hope you can help me.

I'm so confused... Why do you need PHP to access the ID from the input fields anyways? Isn't he PHP the one defining the IDs? — nine7ySix
– nine7ySix, Commented Aug 15, 2013 at 3:19
The question is very simply there is a much better way to do this — DevZer0
– DevZer0, Commented Aug 15, 2013 at 3:21
I need the ID of the inputs for my jquery. Are there any other way to perform this logic? — rochellecanale
– rochellecanale, Commented Aug 15, 2013 at 3:23
there you go check my answer, its less messy and no javascript loops — DevZer0
– DevZer0, Commented Aug 15, 2013 at 3:32

Fly_pig · Accepted Answer · 2013-08-15 05:58:34Z

1

There isn't input event.

It's easy to get id attribute, what you really need to do is to add $(documnet).ready(..) and replace input event to change event.

So, update js code:

UPDATE: I mistook to use # selector , and have updated it to [id^=...]

$(document).ready(function(){
    // well,$('selector1,selector2')  not  $('selector1','selector2')
    $('[id^=qty] , [id^=price]').on('change',function() {
        var index=this.id.match(/\d+/)[0];
        var qty = parseInt($('#qty'+index).val());
        var price = parseFloat($('#price'+index).val());
        $('#total'+index).val((qty * price ? qty * price : 0).toFixed(2));
    });
});

edited Aug 15, 2013 at 5:58

answered Aug 15, 2013 at 3:46

Fly_pig

1658 bronze badges

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

3 Comments

Fly_pig Over a year ago

@user2585508 That's because I made a mistake, try to use parseInt but got NaN.I have replaced parseInt to regular expression.I think it works.Have a try.

rochellecanale Over a year ago

still not working. do you have an email so that i can send you my whole code? and please tell me what's y error.

Fly_pig Over a year ago

@user2585508 [email protected]

Dave Chladek · Accepted Answer · 2013-08-15 03:27:20Z

0

I may not be understanding the question correctly but why not have PHP calculate the grand total and then place the value in the grand total?

answered Aug 15, 2013 at 3:27

Dave Chladek

1

1 Comment

rochellecanale Over a year ago

Because i want to do it in a my client side.

DevZer0 · Accepted Answer · 2013-08-15 03:30:53Z

first you generate your html as follows, lets use your class to attach the trigger, and define a custom type called data-type to test against and also add data-row to keep track of the row your in.

for($i = 1; $i < 11; $i++){
    echo "<tr>";
       echo "<td><input type='text' data-row='{$i}' data-type='qty' name='qty{$i}' class='k-textbox' id='qty{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='item' name='item{$i}' class='k-textbox' id='item{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='price' name='price{$i}' class='k-textbox' id='price{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='total' name='total{$i}' class='k-textbox' id='total{$i}'></td>";
    echo "<tr>";
}

then lets work on the jquery without any need for redundant loops

<script type="text/javascript">
   $(function () {
          $(".k-textbox").input(function (evt) {
               var that = $(this);
               if (that.attr('data-type') != 'price' && that.attr('data-type') != 'qty) return;
               var row = that.attr('data-row');
               var qty = parseInt($('#qty'+row).val());
               var price = parseFloat($('#price'+row).val());
               $('#total'+row).val((qty * price ? qty * price : 0).toFixed(2));
          });
    });
</script>

Collectives™ on Stack Overflow

How to compute perform a javascript/jquery computation using loops from PHP data?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related