невозможно обновить текстовое поле по событию, используя js - не определено - PullRequest
0 голосов
/ 16 февраля 2020

Мое намерение состоит в том, чтобы установить значение входа, используя js, когда я изменяю опцию выбора. Но он получает неопределенное значение

Это мой html (jsp) файл.

<body>
        <center><h1>Ventas</h1>
            <table border="2">
                <tr>                    
                    <th>Producto</th>
                    <th>Precio</th>
                </tr>
                <tr>
                    <th>
                        <select name="productos" onchange="ponerPrecio(event)">   
                            <c:forEach items="${product}" var="prdct">
                                <option value="${prdct.idProducto}" data="${prdct.precioUnidad}">${prdct.nombre}</option>
                            </c:forEach>
                        </select>
                        <td><input type="text" name="precio" id="price" value="" readonly></input></td> 
                    </th>
                </ tr>  
                <script> 

                    function ponerPrecio(e) {

                        var precio = e.target.data;
                        document.getElementById("price").value = precio ;

                    }
                </script>        
            </table>
                    <input type="button" name="begin" value="Inicio"onclick="window.location.href='principal.htm'" />
        </center>    
    </body>

Из $ {product} я получаю все элементы моей БД для его использования. Идея состоит в том, чтобы использовать "data" для обновления ввода с именем precio со значением $ {prdct.precioUnidad}.

1 Ответ

0 голосов
/ 16 февраля 2020

Используйте data-price вместо data атрибут

<center>
    <h1>Ventas</h1>
    <table border="2">
        <tr>                    
            <th>Producto</th>
            <th>Precio</th>
        </tr>
        <tr>
            <th>
                <select name="productos" onchange="ponerPrecio(event)">   
                    <c:forEach items="${product}" var="prdct">
                        <option value="${prdct.idProducto}" data-price="${prdct.precioUnidad}">${prdct.nombre}</option>
                        <option value="2" data-price="10">Custom Item</option>
                    </c:forEach>
                </select>
            </th>
            <td><input type="text" name="precio" id="price" value="" readonly></input></td> 
        </tr>        
    </table>
    <input type="button" name="begin" value="Inicio" onclick="window.location.href='principal.htm'" />

    <script> 
        function ponerPrecio(e) {
            var precio = e.target.options[e.target.selectedIndex].dataset.price;
            document.getElementById("price").value = precio;
        }
    </script>  
</center>    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...