Hola, os cuento lo que tengo.
Tengo un pagina hecha en php con un listado de productos que los coge de la base de datos en la cual al lado del producto aparece el precio y al lado de este un select para poder seleccionar entre 1 y 10 productos, todo esto funciona perfecto, el problema esta en que quiero que al lado de el select aparecezca el total de lo que cuesta lo que haya seleccionado el cliente, es decir, si el producto vale 100 y el cliente selecciona en el select 3, inmediatamente el campo total deberia actualizarse en 300.
Me gustaria hacerlo en javascript
Este es el codigo php
Código PHP:
<?php
$trabajoinstan=new Trabajo();
$listandoproductos=$trabajoinstan->listaSoloProductosporId($_GET["categoriaxjavascript"]);
for ($i = 0; $i < count($listandoproductos); $i++)
{
?>
<tr class="fuenteParisian fuente20">
<td class=" centradovertical"><?php echo ucfirst($listandoproductos[$i]["producto"]);?></td>
<td id="precio"><?php echo ucfirst($listandoproductos[$i]["precio"]);?> €</td>
<td id="cantidad">
<div class="selectcantidad">
<select id="cantidad" >
<?php
for ($j = 1; $j <= 10; $j++)
{
?>
<option value="<?php echo $j; ?>"> <?php echo $j; ?> </option>
<?php
}
?>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="checkbox" class="form-control"/>
</div>
</td>
<td>
<input type="text" onmouseover="calculaTotal();" />
</td>
</tr>
<?php
}
?>
y esta es la funcion javascript que he hecho
Código:
function calculaTotal()
{
var total;
var precio;
var cantidad;
precio=document.getElementById('precio').value;
cantidad=document.getElementById('cantidad').value;
total=precio*cantidad;
return total;
}
no me funciona, pero pienso que es por que no se integrarla bien, y ademas al tener que coger el valor a multiplicar de un bucle for, pienso que no lo estoy haciendo correctamente, la idea es que al mover el select, el total se incremente.
Si me pudierais echar una mano, me ayudaria bastante
Gracias.