0

i got problem here when i want to create auto calculate value of total for each row

example :

This is table data

id Price Quantity Total
1 40 12 480
2 12 3 36

What i really want is create an update value form

<form action="" method="Post>
$que_= "SELECT * FROM data ;                                                        
$res_ = mysqli_query($db_conn_data,$que_);                                            
while ($row_= mysqli_fetch_array($res_)){ 
<input type="text" name="price" id="price" class="form-line" style="width: 90px;" onchange="calculateAmount(this.value)"  value="<? echo $row_["Price"]; ?>">
<input type="hidden" id="q" name="q" value="<? echo $row_["Quantity"]; ?>">
<input type="text"  id="tot_amount" name="tot_amount" class="form-line" style="width: 90px;" value="<? echo $row_["Total"]; ?>" >


<script>
function calculateAmount(val) {
var price_ = val *document.getElementById("q").value;
/*display the result*/
var divobj = document.getElementById('tot_amount');
divobj.value = price_;}
</script>
}   
</form>

So user will change the value in price input form and it will auto calculate the new Price * Quantity using javascript also replace the Total value in form

but what exactly happen right now when i change the price in the form it only calculate quantity for first row only and not by each row

Improve this question

2 Answers 2

Reset to default
1

@redstar-entertainment already gave a good answer using jQuery. Here is one using pure JavaScript.

Note that it is crucially important that you post your full and proper HTML if you want any JavaScript to operate on it properly. For instance, you say you have a form with rows, but I don't see any table or other block-level elements in your HTML for forming rows. Also, your method attribute is not closed which may cause errors, and you are using ID attributes that are not unique per row. You should make them unique or get rid of them, because you don't need them for the following.

Assuming you are using a table with TR elements, you can then use the following JavaScript. Note that you must also change onchange="calculateAmount(this.value)" to onchange="calculateAmount(this)" because the function needs a DOM element to know which row it is operating on.

  function calculateAmount(e) {
    var row = e.closest('tr')
    tr.querySelector('[name=tot_amount]').value =
      e.value * row.querySelector('[name=q]').value
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

"because the function needs a DOM element to know which row it is operating on" -- Exactly !!!
For the sentence I quoted above by @cito, I would like to add on that for this very reason I had used $(this).parent().find() function. If you would work out a little even jQuery would have fixed your problem. But since your problem is solved I am glad :)
1

jQuery alternative

$(".q").bind('keyup blur', function(){
  var quantity = $(this).parent().find(".q").val();
  var value = $(this).parent().find(".package").val();
  var price = quantity*value;
  $(this).parent().find(".tot_amount").html(price.toFixed(2));
});

In your HTML change ID to Class

<input type="text" name="price" class="price form-line" style="width: 90px;" onchange="calculateAmount(this.value)"  value="<? echo $row_["Price"]; ?>">
<input type="hidden" class="q" name="q" value="<? echo $row_["Quantity"]; ?>">
<input type="text" name="tot_amount" class="tot_amount form-line" style="width: 90px;" value="<? echo $row_["Total"]; ?>" >

See if this works!

Improve this answer

5 Comments

thanks but it not change the total value in the form
I have updated the answer.. see if that works!
nice code but the value still same after key in new price
are you trying to implement the idea on your own or just relying on my code? What I gave should only be treated as an example or helping step to start up not as the actual solution. I have shown the path. You should try to figure out the rest.
i use your code to testing and just giving feedback. i still working to solve the problem with other way

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.