When I change the select option, my goal is to dynamically set the value of the input using JavaScript. However, I am encountering an issue where the value becomes undefined.
Below is a snippet from my HTML (JSP) file:
<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.getAttribute('data');
document.getElementById("price").value = precio;
}
</script>
</table>
<input type="button" name="begin" value="Inicio" onclick="window.location.href='principal.htm'" />
</center>
</body>The ${product} variable provides me with all the items stored in my database for use. The purpose is to utilize the "data" attribute to update the input named "precio" with the value of ${prdct.precioUnidad}.