javascript- formulario- crear nuevo

ariel_buc · #1 (**permalink**) 22/05/2012, 09:28

Hola:

Necesito ayuda con un formulario, más abajo dejo el código para que entiendan de que hablo.
Como verán el formulario permite realizar una serie de cálculos.
Lo que necesito hacer es que en el botón "agregar ítem" con el evento onclick me permita crear o clonar el formulario, asimismo necesito un botón que me permita eliminarlo.
Por último necesito hacer la sumatoria del campo que llamo subtotal en un nuevo campo llamado total.
Por favor si alguien me puede ayudar u orientar como realizar lo que quiero porque estoy trabado y no se por donde empezar.
Desde ya muchas gracias

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
 
<script type="text/javascript"> 
 
 
function OperAritmeticas(){ 
      interval = setInterval("calcular()",1); 
} 
function calcular(){ 
 var  cantidad = document.FacProvForm.cantidad.value; 
 var  costo   = document.FacProvForm.costo.value;  
 var  subtotal = document.FacProvForm.subtotal.value = (cantidad * costo) ; 
 var  PcioVta = document.FacProvForm.PcioVta.value; 
 var  gcia = document.FacProvForm.gcia.value = (((PcioVta / costo)-1)*100) ; 
} 
function NoOperAritmeticas(){ 
      clearInterval(interval); 
} 
 
 
 
 
</script> 
 
</head> 
 
<body> 
 
 
 
<form name="FacProvForm"> 
<input name="cantidad" type=text onFocus="OperAritmeticas();" onBlur="NoOperAritmeticas();" value="" size="15"> 
<input name="costo" type=text onfocus="OperAritmeticas();" onblur="NoOperAritmeticas();" value="" size="15" /> 
<input name="subtotal" type=text size="15"> 
<input name="PcioVta" type=text onfocus="OperAritmeticas();" onblur="NoOperAritmeticas();" value="" size="15" /> 
<input name="gcia" type=text size="15"> 
<input name="Agregar" type="button" onClick= "" value="Agregar Item" /> 
</form> 
 
</body> 
</html>

djaevi · #2 (**permalink**) 22/05/2012, 11:05

Hola me resulto interesante tu trabajo asi que lo corregi un poco fijate si te sirve y si te hace falta cambiarle algo me avisas ;).

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<script type="text/javascript">

Código Javascript:

Ver originalfunction clon(e) {
    var cantForms = document.getElementsByName("FacProvForm").length;
    var clon = e.parentNode.cloneNode(true);
        clon.Eliminar.onclick = function() {
            document.body.removeChild(this.parentNode);
        }
    clon.calcular = e.parentNode.calcular;
    clon.cantidad.value = 0;
    clon.costo.value = 0;
    clon.subtotal.value = 0;
    clon.PcioVta.value = 0;
    clon.gcia.value = 0;
    document.body.appendChild(clon);    
}
 
function assign() {
    document.forms[0].calcular = function() {
        this.Vcantidad = this.cantidad.value;
        this.Vcosto = this.costo.value; 
        this.Vsubtotal = this.subtotal.value = (this.Vcantidad * this.Vcosto) ;
        this.VPcioVta = this.PcioVta.value;
        this.Vgcia = this.gcia.value = (((this.VPcioVta / this.Vcosto)-1)*100) ;
    }
    //alert(document.forms[0].calcular);
}

Código HTML:

Ver original</script>
 
</head>
 
<body onload="assign();">
 
<form name="FacProvForm">
<input name="cantidad" type="text" onkeyup="this.parentNode.calcular()" size="15" value="0">
<input name="costo" type="text" onkeyup="this.parentNode.calcular()" size="15" value="0">
<input name="subtotal" type="text" onkeyup="this.parentNode.calcular()" size="15" value="0">
<input name="PcioVta" type="text" onkeyup="this.parentNode.calcular()" size="15" value="0">
<input name="gcia" type="text" onkeyup="this.parentNode.calcular()" size="15" value="0">
<input name="Agregar" type="button" onClick= "clon(this);" value="Agregar Item" />
<input name="Eliminar" type="button" value="Eliminar Item" />
</form>
 
</body>
</html>

Ahora mismo me estoy yendo si necesitas que te explique como funciona el codigo me avisas

SALUDOS

ariel_buc · #3 (**permalink**) 22/05/2012, 15:23

DJAEVI:

GRACIAS, GRACIAS, GRACIAS

Sin tu ayuda me hubiese llevado mucho tiempo poder hacerlo.
Si no es mucho pedir, podrías sugerirme algo para crear un campo que sume el campo que llamo subtotal a medida que voy agregando los items?????????????.

Y de nuevo gracias.

djaevi · #4 (**permalink**) 22/05/2012, 19:29

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facturas</title>
 
<style>
    body {
        font-family:"Trebuchet MS";
    }
    
    #cabecera td {
        width:100px;
        padding-right:6px;
        text-align:center;
        background-color:#EFEFEF;
        border:dashed 1px #DEDEDE;
        }
    
    #ElementosFactura input {
        width:100px;
        text-align:center;
        }
        
    .botones {
        border:1px;
        cursor:pointer;
        margin-left:20px;
        }
        
    #totales {
        padding-top:10px;
        width:100%;
        padding-left:386px;
        }
        
    #totales input {
        width:100px;
        }
        
</style>
 
<script type="text/javascript">

Código Javascript:

Ver originalfunction clon(e) {
        var cantForms = document.getElementsByName("FacProvForm").length;
        var clon = e.cloneNode(true);
            clon.Eliminar.onclick = function() {
                document.getElementById("ElementosFactura").removeChild(this.parentNode);
                sumar();
            }
        clon.calcular = e.parentNode.calcular;
        clon.cantidad.value = 0;
        clon.costo.value = 0;
        clon.subtotal.value = 0;
        clon.PcioVta.value = 0;
        clon.gcia.value = 0;
        document.getElementById("ElementosFactura").appendChild(clon);   
    }
     
    function assign() {
        document.forms[0].calcular = function() {
            this.Vcantidad = this.cantidad.value;
            this.Vcosto = this.costo.value;
            this.Vsubtotal = this.subtotal.value = (this.Vcantidad * this.Vcosto) ;
            this.VPcioVta = this.PcioVta.value;
            this.Vgcia = this.gcia.value = (((this.VPcioVta / this.Vcosto)-1)*100) ;
        }
        //alert(document.forms[0].calcular);
    }
    
    function sumar() {
        var subtotales= document.getElementsByName("subtotal");
        var suma = 0;
        for (var i=0; i<subtotales.length; i++) {
            suma += Number(subtotales[i].value);
            }
        document.getElementById("sumaTotal").value = suma;
        }

Código HTML:

Ver original</script>
     
    </head>
     
    <body onload="assign();">
     
    <div id="factura" style="width:800px;">  
        <table id="cabecera" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>Cantidad</td>
                <td>Costo</td>
                <td>Subtotal</td>
                <td>Precio de Venta</td>
                <td>Ganancia</td>
            </tr>
        </table>
        <div id="ElementosFactura">
            <form name="FacProvForm">
                <input name="cantidad" type="text" onkeyup="this.parentNode.calcular(); sumar();" size="15" value="0">
                <input name="costo" type="text" onkeyup="this.parentNode.calcular(); sumar();" size="15" value="0">
                <input name="subtotal" type="text" onkeyup="this.parentNode.calcular(); sumar();" size="15" value="0">
                <input name="PcioVta" type="text" onkeyup="this.parentNode.calcular(); sumar();" size="15" value="0">
                <input name="gcia" type="text" onkeyup="this.parentNode.calcular(); sumar();" size="15" value="0">
                <input class="botones" name="Agregar" type="button" onClick= "clon(this.parentNode);" value="Agregar Item" />
                <input class="botones" name="Eliminar" type="button" value="Eliminar Item" />
            </form>
        </div>
        <div id="totales">
            Total: <input type="text" id="sumaTotal" />
        </div>
    </div>
    </body>
</html>

Ahi esta fijate si te sirve, lo probe y anda de paso lo estilize un poco jaja

Saludos

ariel_buc · #5 (**permalink**) 23/05/2012, 07:12

Muchas gracias nuevamente:

Hiciste de un carbón un diamante,

Pero igual te tengo que molestar porque cuando se agrega un nuevo ítem ya no calcula el subtotal del mismo, por lo tanto tampoco actualiza el total. Anoche estuve revisando la función que agregaste para el total pero no me doy cuenta como solucionarlo.

Saludos

djaevi · #6 (**permalink**) 23/05/2012, 07:52

Perdon se me filtro una linea optimizando el codigo cambia:

clon.calcular = e.parentNode.calcular;

por

clon.calcular = e.calcular;

Saludos

ariel_buc · #7 (**permalink**) 23/05/2012, 08:35

Funciona de maravilla,
ahora voy a seguir trabajando para que me guarde los datos en las tablas correspondiente.

Saludos y gracias por la ayuda

ariel_buc · #8 (**permalink**) 23/05/2012, 16:04

djaevi:

Perdón que te moleste nuevamente pero no puedo enviar la información a otro archivo para grabarlo en la base de datos.
No soy muy bueno con javascript y no logro compreder como crear un formulario (action="insertar_datos.php" method="post">) sin alterar el funcionamiento del formulario "FacProvForm" y a la vez que incluya el total y otros datos como proveedor, la fecha etc.
El proveedor, la fecha, el total etc tienen que grabarse en una tabla diferente, a la tabla en que se debe grabar el formulario "FacProvForm".
No se si podes ayudarme con esto o darme alguna idea porque mis intentos han sido todos fallidos, tan solo pudiendo grabar parcialmente cada linea.