Mira la vdd esta muy cabrón hacerlo, yo tenia que formarlo para un proyecto que estoy desarrollando, pero no encuentro la forma aún así que de momento ps solo desarrolle las sumatorias con jQuery te las paso a ver si te sirven de algo:
Código HTML :
<table id="suma"><tr><td>Cantidad </td><td>Codigo de producto</td><td> Precio </td><td> Subtotal</td></tr>
<tr><td class="input">
<input type="text" style="width:50px;" name="cantidad_p[]" id="cantidad1">
</td><td>
<input type="text" style="width:50px;" name="descripcion_p[]" />
</td><td class="input">
$<input type="text" style="width:50px;" name="precio_p[]" id="precio1">
</td><td>
$<input type="text" style="width:70px;" name="subtotal" id="subtotal1" disabled="disabled" value="0">
</td></tr>
<tr><td class="input">
<input type="text" style="width:50px;" name="cantidad_p[]" id="cantidad2">
</td><td>
<input type="text" style="width:50px;" name="descripcion_p[]" />
</td><td class="input">
$<input type="text" style="width:50px;" name="precio_p[]" id="precio2">
</td><td>
$<input type="text" style="width:70px;" name="subtotal" id="subtotal2" disabled="disabled" value="0">
</td></tr>
<tr><td colspan="4">Total: <input type="text" style="width:80px;" name="total" id="total" disabled="disabled" value="0"></td></tr>
</table>
Inmediatamente después del código HTML de tu form debe acompañar el jQuery
Código Javascript :
<script type='text/javascript'>
// Cada vez que se pulse una tecla, controlamos que sea numerica
$("#suma input").keypress(function(event) {
//obtenemos la tecla pulsada
var valueKey=String.fromCharCode(event.which);
//obtenemos el valor ascii de la tecla pulsada
var keycode=event.which;
// Si NO pulsamos un numero, un punto, la tecla suprimir
// la tecla backspace o el simobolo "-" (45), cancelamos la pulsacion
if(valueKey.search('[0-9|\.]')!=0 && keycode!=8 && keycode!=46 && keycode!=45)
{
// anulamos la pulsacion de la tecla
return false;
}
});
// evento que se ejecuta cada vez que se suelte la tecla en cualquiera de
// los tres inputs
$("#suma input").keyup(function(event) {
calcular("#cantidad1","#precio1","#subtotal1");
calcular("#cantidad2","#precio2","#subtotal2");
});
// Calculamos la suma de los dos valores
function calcular(cantidad,precio,subtotal)
{
var valor1=validarNumero(cantidad);
var valor2=validarNumero(precio);
$(subtotal).val(valor1*valor2);
$(total).val(validarNumero("#subtotal1")+validarNumero("#subtotal2"))
}
// Funcion para validar que el numero sea correcto, y para cambiar el color
// del marco en caso de error
function validarNumero(id)
{
if($.isNumeric($(id).val()))
{
$(id).css('border-color','#808080');
return parseFloat($(id).val());
}else if($(id).val()==""){
$(id).css('border-color','#808080');
return 0;
}else{
$(id).css('border-color','#f00');
return 0;
}
}
</script>
El problema se encuentra al momento de agregar campos, porque no conozco la forma de vincular la posibilidad infinita de crear campos de producto y sacar los cálculos del sub-total y finalmente el total de ellos. Cuando lo desarrolle tratare de subirlo hermano, un saludo!
