Comunidad de diseño web y desarrollo en internet online

Añadir campos, sumar valores de fila y poner un total

Citar            
MensajeEscrito el 05 May 2012 06:37 am
Buenas tardes, les pido su gran ayuda en lo que sigue.... Quisiera poder tener un formulario en el que pueda añadir nuevas filas de campos, cada fila lleva un campo "cantidad", "precio" y "total".... luego la idea es poder sumar todos los campos totales y poner el resultado en un campo "resultado".

He estado intentando hacerlo con html y javascript, luego incorporé jquery para que los valores no se borraran pero hasta ahí llego... dejaré el código de la estructura básica para ver si me pueden ayudar...

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agregar campos</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
emails=0;
function agregar() {
emails=emails+1;
$("#campos").append('<li class="email'+emails+'"><input type="text" name="cantidad[]" /><input type="text" name="precio[]"/><input type="text" name="total[]"/></li>');
}
</script>
</head>
<body>
<form name="frm_multiple" method="post" action="procesar.php">
<ul id="emails">
<li><a href="javascript:agregar();">Agregar</a><br />
<input type="text" name="cantidad[]" /><input type="text" name="precio[]" /><input type="text" name="total[]" />
</li>
<li id="campos"><!-- aquí se crean los CAMPOS --></li>
</ul>
<input type="text" name="resultado" />
 
<p align="center"><input type="submit" name="Send" value="Send" /></p>
</form>
</body>
</html>


esto es lo que logré completar... les ruego me ayuden a sumar los campos "cantidad" y "precio" y dejar el resultado en "total" y luego en el campo resultado poner la suma de todos los "totales"
Saludos cordiales y muchas gracias desde ya...

Por neveuster

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 14 Ago 2012 01:53 am
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!

:evil:

Por atonab

27 de clabLevel



Genero:Masculino  

Web Design & Productor

chrome
Citar            
MensajeEscrito el 14 Ago 2012 02:19 am

Por atonab

27 de clabLevel



Genero:Masculino  

Web Design & Productor

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.