Primero que todo quite los atributos de clase para que se visualice mejor, ya eso es cuestión de maquetación y carpintería.
Suponiendo que tienes 3 productos:
Producto 1 | 1000
Producto 2 | 5000
Producto 3 | 3000
al ejecutarse tu PHP este seria mas o menos el resultado:
Código HTML:
Ver original <td id="precio">1000
</td> <?php
for ($j = 1; $j <= 10; $j++) {
?>
<option value="<?php echo $j; ?>">
<?php echo $j; ?> </option> <?php
}
?>
<input type="checkbox" class="form-control"/> <input type="text" onmouseover="calculaTotal();" /> <td id="precio">5000
</td> <?php
for ($j = 1; $j <= 10; $j++) {
?>
<option value="<?php echo $j; ?>">
<?php echo $j; ?> </option> <?php
}
?>
<input type="checkbox" class="form-control"/> <input type="text" onmouseover="calculaTotal();" /> <td id="precio">3000
</td> <?php
for ($j = 1; $j <= 10; $j++) {
?>
<option value="<?php echo $j; ?>">
<?php echo $j; ?> </option> <?php
}
?>
<input type="checkbox" class="form-control"/> <input type="text" onmouseover="calculaTotal();" />
¿Has notado los problemas? Seguro te habras dado cuenta que:
1ro: Los id: Precio e id: Cantidad se repiten en cada iteración del PHP «Los id son únicos»
2do: Intentas acceder a precio como si se tratase de un input;
precio=document.getElementById('precio').value
esta forma de acceder es incorrecta, en este caso puedes usar un innerHTML
precio=document.getElementById('precio').innerHTML ;
3ro: Quieres asignar un id tanto al campo de la tabla al cual defines cantidad como al select, ambos los identificas como id:Cantidad, «recuerda que el que contiene el valor es el select en este caso, puesto que el td contiene es al select (un objeto)»
4to: Usas el evento onmouseover sobre la casilla del total cuando el evento que te intereza es el onchange del select, puesto que solo realizaras un calculo si el valor del select cambia.
Soluciones Posibles
1ro:
Usa un contador: $contador = $contador + 1;
Este lo aplicas para la declaración de identificadores id="precio<?php echo $contador; ?" así obtendrías algo como:
precio1
precio2
precio3
2do:
Si deseas usar el campo <td id="precioN">numero</td> para acceder al contenido osea el texto (numero) lo haces con la propiedad innerHTML como lo indique arriba, sin embargo me doy cuenta que tienes una sintaxis mas o menos así:
5000 € no es un numero propiamente dicho así que primero tendrías que crear una función formato(valor) que elimine los caracteres no numéricos.
3ro:
Solo asignale un id al select, el campo (td) no es de tu importancia aquí.
4to:
Usa el atributo onchange del select así cada cambio que hagas ejecutara la función CalcularTotal();
Sugerencia usa un parámetro en la función CalcularTotal(parametro) así sabrás cual input id:totalN afectaras así:
codigo del input:
ejemplo de resultado esperado:
idea de una función:
Código Javascript
:
Ver originalfunction calculaTotal(posicion)
{
//Rescatas el valor del elemento con el id indicado
var precio = document.getElementById('precio'+posicion).innerHTML;
var cantidad = document.getElementById('cantidad'+posicion).value;
//Eliminas los caracteres no numericos y retornas un numero real
precio = formatearMoneda(precio);
//El resultado lo escribes en el input con el id indicado
document.getElementById("total"+posicion).value = precio * cantidad;
}
No falta decir que la función formatearMoneda la debes crear previamente y que la nueva forma de llamar a la funcion CalcularTotal es:
En todo caso hay varias pautas que mejorar, mucha suerte con tu proyecto...