Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/01/2015, 02:02
NeaFan
 
Fecha de Ingreso: diciembre-2014
Ubicación: montería
Mensajes: 33
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Calcular importe de un listado dinamico en base a un select

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
  1.     <tr>
  2.         <td >Producto 1</td>
  3.         <td id="precio">1000</td>
  4.         <td id="cantidad">
  5.             <select id="cantidad"  >
  6.                 <?php
  7.                for ($j = 1; $j <= 10; $j++) {
  8.                    ?>  
  9.                     <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
  10.                     <?php
  11.                }
  12.                ?>
  13.             </select>
  14.         </td>
  15.         <td>
  16.             <input type="checkbox" class="form-control"/>
  17.         </td>
  18.         <td>
  19.             <input type="text" onmouseover="calculaTotal();" />
  20.         </td>
  21.     </tr>
  22.         <tr>
  23.         <td >Producto 2</td>
  24.         <td id="precio">5000</td>
  25.         <td id="cantidad">
  26.             <select id="cantidad"  >
  27.                 <?php
  28.                for ($j = 1; $j <= 10; $j++) {
  29.                    ?>  
  30.                     <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
  31.                     <?php
  32.                }
  33.                ?>
  34.             </select>
  35.         </td>
  36.         <td>
  37.             <input type="checkbox" class="form-control"/>
  38.         </td>
  39.         <td>
  40.             <input type="text" onmouseover="calculaTotal();" />
  41.         </td>
  42.     </tr>
  43.         <tr>
  44.         <td >Producto 3</td>
  45.         <td id="precio">3000</td>
  46.         <td id="cantidad">
  47.             <select id="cantidad"  >
  48.                 <?php
  49.                for ($j = 1; $j <= 10; $j++) {
  50.                    ?>  
  51.                     <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
  52.                     <?php
  53.                }
  54.                ?>
  55.             </select>
  56.         </td>
  57.         <td>
  58.             <input type="checkbox" class="form-control"/>
  59.         </td>
  60.         <td>
  61.             <input type="text" onmouseover="calculaTotal();" />
  62.         </td>
  63.     </tr>

¿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í:
Código HTML:
Ver original
  1. <td id="precio2">5000 </td>
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í.
Código HTML:
Ver original
  1. <td><select id="Cantidad<?php echo $contador; ?>"><?php ... ?></select>

4to:
Usa el atributo onchange del select así cada cambio que hagas ejecutara la función CalcularTotal();
Código HTML:
Ver original
  1. <td><select id="Cantidad1" onchange="CalcularTotal();">9</select>

Sugerencia usa un parámetro en la función CalcularTotal(parametro) así sabrás cual input id:totalN afectaras así:
codigo del input:
Código HTML:
Ver original
  1. <input id="total<?php echo $contador; ?>" type="number"/>
ejemplo de resultado esperado:
Código HTML:
Ver original
  1. <input id="total3" type="number"/>

idea de una función:
Código Javascript:
Ver original
  1. function calculaTotal(posicion)
  2.         {
  3.             //Rescatas el valor del elemento con el id indicado
  4.             var precio = document.getElementById('precio'+posicion).innerHTML;
  5.             var cantidad = document.getElementById('cantidad'+posicion).value;
  6.             //Eliminas los caracteres no numericos y retornas un numero real
  7.             precio = formatearMoneda(precio);
  8.             //El resultado lo escribes en el input con el id indicado
  9.             document.getElementById("total"+posicion).value = precio * cantidad;
  10.         }
No falta decir que la función formatearMoneda la debes crear previamente y que la nueva forma de llamar a la funcion CalcularTotal es:

Código HTML:
Ver original
  1. <td><select id="Cantidad<?php echo $contador; ?>"><?php ... ?></select>
Código HTML:
Ver original
  1. <td><select id="Cantidad1" onchange="CalcularTotal(1);">9</select>

En todo caso hay varias pautas que mejorar, mucha suerte con tu proyecto...

Última edición por NeaFan; 04/01/2015 a las 02:08