CODEWITHSUNDEEP
javascriptwhile-loopfield
Robert Grain
Robert Grain

Reputation: 61

Javascript multiply of 2 fields with answer in 3rd inside a PHP while loop

I am showing an records from a quantity and price list for parts used from a MySQL table and updating any changes back to the database but I also need to have a calculated field that quantity * price = Amount. I just cant quite seem to get it working. I am new to JavaScript. I used a GetElementById and it showed a NaN in the first total I then thought about it and I think it may be going through the whole table.

So have tried to create a dynamic id when in the while loop but cannot get it to show. I'm not exactly sure if I am even on the right track of how to achieve the calculation without submitting the page. any help would be appreciated thank you.

<?php
while ($list_parts = mysqli_fetch_array($parts_result))
{
    echo " <table border ='0' table width = 95%>";
    echo '<td> <input type="hidden" value="'.$list_parts['unique_id'].'" name="changed_unique_id[]">';
    echo '<td> <input type="hidden" value="'.$list_parts['job_number'].'" name="changed_job_number[]">';
    echo '<td> Quantity   <input type="text"  value="'.$list_parts['qty'].'" name="changed_part_quantity[]" id="qty'.$list_parts['unique_id'].'" onkeypress="qty'.$list_parts['unique_id'].'">';
    echo '<td> Description <input type="text" value="'.$list_parts['item_description'].'" name="changed_item_description[]">';
    echo '<td> Part Number <input type="text" value="'.$list_parts['part_number'].'" name="changed_part_number[]">';
    echo '<td> Part Price <input type="text"  value="'.$list_parts['price'].'" name="changed_part_price[]" id="price'.$list_parts['unique_id'].'" onkeypress="price'.$list_parts['unique_id'].'">';
    echo '<td> Total <input type="text" value="'.$list_parts['sub_total'].'" name="changed_part_sub[]" id="total'.$list_parts['unique_id'].'" >';
    echo "</tr>";   
}
echo "</table>";        
?>

My JavaScript is as follows

function showtotal(){
    var quantity = document.getElementById("qty'.$list_parts['unique_id'].'").value;
    var price = document.getElementById("price'.$list_parts['unique_id'].'").value;
    var sum = parseInt(quantity) + parseInt(price);
    document.getElementById("total'.$list_parts['unique_id'].'").value = sum;
}

Upvotes: 0

Views: 428

Answers (2)

Robert Grain
Robert Grain

Reputation: 61

I would like to thank you very much Ted for the help. your post helped me solve it by showing me how the theory of it works. after it wouldn't let me use the php in the javascript. I tried a slightly different way. I'm not quite sure if this is the formal way of doing it though but still really happy.

        while ($list_parts = mysqli_fetch_array($parts_result))
            {
                echo "<table border ='0' table width = 95%>";
                echo '<td> <input type="hidden" value="'.$list_parts['unique_id'].'" name="changed_unique_id[]">';
                echo '<td> <input type="hidden" value="'.$list_parts['job_number'].'" name="changed_job_number[]">';
                echo '<td> Quantity   <input type="text" onchange="showtotal('.$list_parts['unique_id'].')" value="'.$list_parts['qty'].'" name="changed_part_quantity[]" id="qty'.$list_parts['unique_id'].'">';
                echo '<td> Description <input type="text" value="'.$list_parts['item_description'].'" name="changed_item_description[]">';
                echo '<td> Part Number <input type="text" value="'.$list_parts['part_number'].'" name="changed_part_number[]">';
                echo '<td> Part Price <input type="text" onchange="showtotal('.$list_parts['unique_id'].')" value="'.$list_parts['price'].'" name="changed_part_price[]" id="price'.$list_parts['unique_id'].'" >';
                echo '<td> Total <input type="text" id="total'.$list_parts['unique_id'].'" value="'.$list_parts['sub_total'].'" name="changed_part_sub[]">';
                echo "</tr>";
                echo $list_parts['unique_id'];
                echo'(total'.$list_parts['unique_id'].')';  
                echo "</table>";
            }

            ?>

Javascript

function showtotal(id){
var quantity = document.getElementById('qty'+id).value;
var price = document.getElementById('price'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10); 
document.getElementById('total'+id).value = sum;

}

Thank you very much

Rob Grain

Upvotes: 0

Ted
Ted

Reputation: 570

If you want to print stuff inside your JavaScript code, you should insert php tags, for both code readability and safety. But the problem was that you are trying to 'add' your "qty" and the result from "$list_parts" with a '.', and that is PHP code, in JavaScript, you use '+'.

I've also noted that in your PHP code, you create a 'table' element inside the while, but only close it outside. Your code will most definitely have errors then, as multiple 'table's will be open, but only one closed. You should move the closure of the 'table' inside the while loop, or move the opening outside the while loop.

EDIT - Inside the getElementById I had writen "qty + " but that was wrong, since your created ID's are only "qty", so the JavaScript was trying to reach an ID that doesn't exist.

So your JavaScript found should be:

function showtotal(){
    var quantity = document.getElementById("qty<?php echo $list_parts['unique_id']; ?>").value;
    var price = document.getElementById("price<?php echo $list_parts['unique_id']; ?>").value;
    var sum = parseInt(quantity) + parseInt(price);
    document.getElementById("total<?php echo $list_parts['unique_id']; ?>").value = sum;
}

Upvotes: 1

Related Questions