[SOLUCIONADO] Multiplicación de inputs dinamicos

[Victor_Jonathan]

Buen día, pues tengo un problema, estoy aprendiendo a programar en javascript, y quiero multiplicar inputs dinámicos por medio de javascript y que esto sea en tiempo real lo que tengo hasta el momento es esto.

codigo javascript.

Código Javascript:

$(document).ready(function(){
 
 $(AddButton).click(function (c) {
    if (y <=  MaxInputs2)
    {
        
          FieldCount2++;
          $(contenedor2).append('<div class= "price" ><input type="text" name="precio[]" id="preci_'+ FieldCount2 +'" onKeyUp="multiplicaciones()" /> </div>');
          y++;
    }
    return false;
 
   });
 
   var MaxInputs3 = 100; //numero maximo de campos
   var contenedor3 = $("#operacion3");
   var AddButton = $("#agregarCampo");
   
   var z = $("#operacion3 div").length + 1;
   var FieldCount3 = z-1;
   
  $(AddButton).click(function (j) {
    if (z <=  MaxInputs3)
    {
        
          FieldCount3++;
          $(contenedor3).append('<div class= "amount" ><input type="text" name="cantidad[]" id="canti_'+ FieldCount3 +'" onKeyUp="multiplicaciones()" /> </div>');
          z++;
    }
    return false;
 
   });
  
 function multiplicaciones() {
   
 
   
   var precio = document.operaciones["precio[]"].value;
   var cantidad = document.operaciones["cantidad[]"].value;
   try{
      //Calculamos el número escrito:
       precio = (isNaN(parseInt(precio)))? 0 : parseInt(precio);
       cantidad = (isNaN(parseInt(cantidad)))? 0 : parseInt(cantidad);
       document.operaciones["res[]"].value = precio*cantidad;
   }
   //Si se produce un error no hacemos nada
   catch(e) {}
}
 
});
 

codigo html

Código HTML:

<form name= "operaciones">
                    
                <div id= "operacion">
                    <div class= "description">
                    <input type="text" name="descripcion[]" id= "descri_1" />
                    </div>
                </div>
                
                <div id= "operacion2">
                    <div class= "price">
                    <input type="text" name="precio[]" id= "preci_1" onKeyUp="multiplicaciones()" />
                    </div>
                </div>
                
                <div id= "operacion3">
                    <div class= amount>
                    <input type="text" name="cantidad[]" id= "canti_1" onKeyUp="multiplicaciones()" />
                    </div>
                </div>
                
                 <div id= "operacion4">
                    <div class= tota>
                    <input type="text" name="res[]" id= "totals_1" />
                    </div>
                    
                    </form>
 

El asunto es que no multiplica los campos, si alguien me pudiera explicar se lo agradeceria mucho, los campos que se tienen que multiplicar son cantidad y precio, el resultado se tiene que visualizar en res. Gracias

[Italico76]

No necesitas jQuery para eso .. la ventaja de como lo has planteado es que si decides agregar un campo "IVA" o "impuestos" ... no hay que hacer mucho para calcular el IVA en cada item

Código Javascript:

<form  method="post" action="#" name="operaciones">                    
 
<!-- cortar aqui -->
                <div id= "operacion">
                    <div class= "description">
                    Articulo:<br/>
                    <input type="text" name="descripcion[]" id= "descri_1"/>
                    </div>
                </div>
                
                <div id= "operacion2">
                    <div class= "price">
                    Precio:<br/>
                    <input type="text" name="precio[]" id= "preci_1"  class="multiplo" />
                    </div>
                </div>
                
                <div id= "operacion3">
                    <div class= "amount">
                    Cantidad:<br/>
                    <input type="text" name="cantidad[]" id= "canti_1" class="multiplo" />
                    </div>
                </div>      
                
                
                <div id= "operacion4">
                    <div class= "tota">
                    Sub-total:<br/>
                    <input type="text" name="res[]" id= "totals_1" />
                </div>      
                <p/>
<!-- cortar aqui -->                
                 
                    
</form>
 
<script>
function multiplicaciones()
{
    n= 1;
    for (i=0;i<multiplos.length;i++)
    {
        if (!isNaN (multiplos[i].value))
            n *= parseInt(multiplos[i].value);
        else
            n = 0;      
    }
    
    if (isNaN(n))
        n =0;
        
    output.value = n;
        
}
 
 
multiplos = document.getElementsByClassName('multiplo'); 
output = document.getElementById('totals_1'); 
 
for (i=0;i<multiplos.length;i++)
    multiplos[i].addEventListener ('keyup',function(){ multiplicaciones();},false);
 
 
</script>
 

[razpeitia]

AngularJS

http://jsfiddle.net/79f4H/1/

[Italico76]

Iniciado por razpeitia

AngularJS

http://jsfiddle.net/79f4H/1/

No resuelve bien cuando uno de los campos no contiene numeros y no generaliza cuales son los "multiplos" pero aporta para quienes no conocemos AngularJS --ya me dieron ganas de investigar--

Corto... quedo cortisimo ese codigo!