CODEWITHSUNDEEP
javascriptphphtml
user3009232
user3009232

Reputation: 11

Calculate total price for multiple rows

I am trying to calculate the price for multiple rows. I have it working for one row however, the onchange function doesn't seem to work when i put it into my for loop. Does anyone know why that is?

JavaScritpt: 

function cal()
{
    var price = document.getElementById('priceper_0').value;
    var per_pack = document.getElementById('per_pack_0').value;
    var quantity = document.getElementById('quantity_0'.value;


    document.getElementById('subtotal_0').value = ((price/per_pack)*quantity).toFixed(2);


}

php/HTML: 

<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>

<tr class="multipp">
<td><input type="text" name="description_0" id="description_0" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="cal();"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" class="txt" size="15" maxlength="9" value="" /></td>
</tr>

<?php
for($i=1; $i<10; $i++) 
{
 echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="cal();" value="'.htmlspecialchars($quantity[$i]).'" /></td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
</table>

Upvotes: 0

Views: 3408

Answers (5)

Parmar Shyamsingh
Parmar Shyamsingh

Reputation: 21

function getTotal($i)
{
var price = document.getElementById('priceper_'+$i+'').value;
var per_pack = document.getElementById('per_pack_'+$i+'').value;
var quantity = document.getElementById('quantity_'+$i+'').value;

document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity);
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_0" id="description_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" size="15" maxlength="9" value="" /></td>
</tr>
<?php
for($i=1; $i<10; $i++)
{
  echo '<tr class="multipp">';
  echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
  echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
  echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
  echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="getTotal('.$i.');" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
  echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
  echo '</tr>';
}
?>
</table>

Upvotes: 0

A. Zalonis
A. Zalonis

Reputation: 1609

You can add to an input field the php row count and then from javascript take this number and with a for loop calc all rows proces. Have a look in below code.

    <table>
    <tr>
    <td>Paper</td>
    <td align="center">Price</td>
    <td align="center">Per Pack</td>
    <td align="center">Quantity</td>
    <td align="center">Sub Total</td>
    </tr>

    <tr class="multipp">
    <td><input type="text" name="description_0" id="description_0" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
    <td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="cal();"/></td>
    <td><input type="text" name="subtotal_0" id="subtotal_0" class="txt" size="15" maxlength="9" value="" /></td>
    </tr>

    <?php
    for($i=1; $i<10; $i++) 
    {
     echo '<tr class="multipp">';
    echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
    echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="calSubTotal(<?=$i?>);" value="'.htmlspecialchars($quantity[$i]).'" /></td>';
    echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
    echo '</tr>';
    }
    ?>
    </table>
<br />
Total: <input type="text" name="Total" id="Total" size="15" maxlength="9" value="" />
    <input type="hidden" name="rowcounter" id="rowcounter" value="<?=$i?>: />
    <?php /*In this example the row counter is alwase 10 */ ?>

Then in javascript code use a loop

function calAllRows()
{
    var rowsCounter = document.getElementById('rowcounter').value;
    vat totalValue = 0;
    for(var i=0;i<rowsCounter ;i++)
    {
      var price = document.getElementById('priceper_' + i + '').value;
      var per_pack = document.getElementById('per_pack_' + i + '').value;
      var quantity = document.getElementById('quantity_' + i + ''.value;
      totalValue += (price/per_pack)*quantity;
    }


    document.getElementById('Total').value = totalValue.toFixed(2);
}

function calSubTotal(var i)
{
     var subTotalValue = 0;

      var price = document.getElementById('priceper_' + i + '').value;
      var per_pack = document.getElementById('per_pack_' + i + '').value;
      var quantity = document.getElementById('quantity_' + i + ''.value;
      subTotalValue += (price/per_pack)*quantity;


    document.getElementById('Total').value = subTotalValue.toFixed(2);
}

Upvotes: 0

Adil Abbasi
Adil Abbasi

Reputation: 3291

you can try onblur as well, this means on leaving textbox focus. what are the arrays you are using in you form value is your form generating fine.

if form is generated fine, you can do it like this as well, Pass your $i to the cal() like, cal($i) for each row in your html.

function cal(ind)
{
    var price = document.getElementById('priceper_'+ind+').value;
    var per_pack = document.getElementById('per_pack_'+ind+').value;
    var quantity = document.getElementById('quantity_'+ind+'.value;


     document.getElementById('subtotal_'+ind').value = ((price/per_pack)*quantity).toFixed(2);


}

Upvotes: 0

Alban D
Alban D

Reputation: 16

I think with multiple rows, you should be giving the number of the row to your cal function so it can work with the correct row in there not always the number 0.

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

The reason is id problem,you should use unique id for elements

Try with this

Pass your $i to the calc() function then do the function like below

onChange=cal($i)

Function 

function cal($i)
{
    var price = document.getElementById('priceper_'+$i+'').value;
    var per_pack = document.getElementById('per_pack_'+$i+'').value;
    var quantity = document.getElementById('quantity_'+$i+'').value;


    document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity).toFixed(2);


}

Upvotes: 2

Related Questions