Блог

Главная - Вопросы по программированию - Как заставить функцию javascript работать внутри таблицы php?

Как заставить функцию javascript работать внутри таблицы php?

#javascript #php #html

#javascript #php #HTML

Вопрос:

Я пытаюсь запустить Multiply функцию и умножить количество заказа на цену товара. Я не могу заставить функцию запускаться внутри цикла PHP, используя oninput атрибут.

 <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 = myResu<
    }
</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>";
}
?>

Комментарии:

1. почему бы вам просто не сделать это на PHP? $result = $row[‘Price_item’] * $row[‘suggested_qty’]; и в столбце результатов echo $result

2. О, хорошо — вы хотите, чтобы это было при вводе пользователем.

3. Вы также не должны использовать встроенные обработчики событий, как oninput и другие. Используйте правильный метод привязки событий в отдельном файле сценария или элементе.

Ответ №1:

Вы используете document.getElementById функцию для ссылки на элементы, но в дополнение к тому факту, что существует несколько входных данных, на которых может выполняться эта функция, ваши входные данные даже не имеют идентификатора.

Чтобы убедиться, что эта функция работает с входными данными, о которых идет речь, вам нужно посмотреть на цель события, а не игнорировать его. Кроме того, вы должны использовать правильную привязку событий вместо встроенных oninput атрибутов.

Вы также не использовали table элемент, и вам действительно нужно вырваться из PHP для огромных блоков HTML-кода.

Это было бы намного проще, используя некоторые фреймворки, такие как jQuery, но это должно сработать.

 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 = myResu<
}  
 <?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>