How to get a javascript function working inside a php table?

Question

I am trying to get the Multiply function to run and multiply the Order Quantity times the item price. I cannot get the function to run inside the PHP loop using the oninput attribute.

<script type="text/javascript">             
    function Multiply() {
        var myBox1 = document.getElementById('editedvalues[]').value; 
        var myBox2 = document.getElementById('price').value;
        var result = document.getElementById('result'); 
        var myResult = myBox1 * myBox2;
        result.value = myResult;
    }
</script>

<?php
$sql = "SELECT item_price.item_id,
               item_price.ITEM_NAME,
               suggested_qty,
               Price_item
        FROM item_price
        JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME";
$result = $conn->query($sql);
?>

form action="#" method="post">
<tr>
<th> ID</th>
<th>Item Name</th>
<th>Suggested Quantity</th>
<th>Price</th>
<th>OrderQuanity</th>
<th>Total Cost</th>

</tr>
<?php

    while ($row = $result->fetch_assoc()) 
{
    echo "<tr>";
    echo "<td>{$row['item_id']}</td>";
    echo "<td>{$row['ITEM_NAME']}</td>";
    echo "<td>{$row['suggested_qty']}</td>";
    echo "<td>{$row['Price_item']}</td>";
    echo "<td><input type='text' name='editedvalues[]' value='{$row['suggested_qty']}' oninput='Multiply()' /></td>";
    echo "<td><input name='result' /></td>";
    echo "</tr>";
}
?>

why don't you just do it in PHP? $result = $row['Price_item'] * $row['suggested_qty']; and in result column echo $result — Danish Hakim Khan
– Danish Hakim Khan, Commented Apr 21, 2019 at 22:09
You should also not be using inline event handlers like oninput any more. Use a proper event binding method in a separate script file or element. — miken32
– miken32, Commented Apr 21, 2019 at 22:11

miken32 · Accepted Answer · 2019-04-21 22:40:49Z

You're using the document.getElementById function to refer to elements, but in addition to the fact that there are multiple inputs that this function can run on, your inputs don't even have an ID.

To make sure this function works on the input in question, you'll need to look at the target of the event instead of ignoring it. As well, you should use proper event binding instead of inline oninput attributes.

You also weren't using a table element, and you should really break out of PHP for huge blocks of HTML code.

This would be much easier using some framework like jQuery, but this should work.

var nodes = document.getElementsByClassName("qtyinput");

for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('input', multiply, false);
}

function multiply(e) {
    var qty = e.target.value; 
    var price = e.target.parentNode.parentNode.getElementsByClassName("pricetd")[0].textContent;
    var result = e.target.parentNode.parentNode.getElementsByClassName("resultinput")[0];
    var myResult = qty * price;
    result.value = myResult;
}

<?php
$sql = "SELECT item_price.item_id,
               item_price.ITEM_NAME,
               suggested_qty,
               Price_item
        FROM item_price
        JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME";
$result = $conn->query($sql);
?>

<form action="#" method="post">
    <table>
    <tr>
        <th> ID</th>
        <th>Item Name</th>
        <th>Suggested Quantity</th>
        <th>Price</th>
        <th>OrderQuanity</th>
        <th>Total Cost</th>
    </tr>

    <!-- test data for snippet -->
    <tr>
        <td>111</td>
        <td>Test item</td>
        <td>4</td>
        <td class="pricetd">40</td>
        <td>
            <input type="text" name="editedvalues[]" class="qtyinput" value="4" />
        </td>
        <td><input name='result' class="resultinput" /></td>
    </tr>

    <?php while ($row = $result->fetch_assoc()) :?>

    <tr>
        <td><?=$row["item_id"]?></td>
        <td><?=$row["ITEM_NAME"]?></td>
        <td><?=$row["suggested_qty"]?></td>
        <td class="pricetd"><?=$row["Price_item"]?></td>
        <td>
            <input type="text" name="editedvalues[]" class="qtyinput" value="<?=$row["suggested_qty"]?>" />
        </td>
        <td><input name='result' class="resultinput" /></td>
    </tr>
    <?php endwhile?>

    </table>
<form>

Collectives™ on Stack Overflow

How to get a javascript function working inside a php table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related