Realizar Multiplicación en Inputs Dinamicos

[xfxstudios]

Buen dia, tarde o noche, les escribo porque agote mis mas básicos conocimientos en JS con respecto a esto, es decir, necesito multiplicar 2 input que se crean de manera dinamica en una factura, serial aglgo asi:

precio unitario * cantidad = total

y asi con cada linea

este es el codigo del formulario donde se crean las lineas:

Código HTML:

<form name="recarga" action="recarga_pago.php" method="POST" enctype="multipart/form-data"><table id="tablatracking" width="100%"> 
        <tbody> 
         <tr> 
                <td align="left"><input onclick="agregarUsuario()" type="button" value="Agregar Recargo" id="boton_agregar" class="btn btn-success"></td> 
          </tr>
            <tr> 
              <td width="100" id="titulo">Cédula</td>
              <td width="50">Articulo</td>
                <td width="33">Punitario</td> 
                <td width="33">Cantidad</td>
                <td width="33">Total</td>
            </tr> 
        </tbody> 
    </table>
    <input type="submit" value="Registrar" name="boton" id="boton_enviar" class="btn btn-warning" />
  </form>
 

y este es el codigo que genera las lineas dinamicamente:

Código Javascript:

// <![CDATA[ 
 
var posicionCampo = 1; 
 
 
function agregarUsuario() { 
 
    nuevaFila = document.getElementById("tablatracking").insertRow(-1); 
 
    nuevaFila.id = posicionCampo; 
 
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='text' size='15' name='cedula[" + posicionCampo + "]' value='' placeholder=' Cedula...' required readonly id='texto[" + posicionCampo + "]' /></td>"; 
    
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='text' size='70' name='articulo[" + posicionCampo + "]' value='' placeholder=' Articulo' required></td>"; 
 
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='10' name='p_unitario[" + posicionCampo + "]' id='p_unitario[" + posicionCampo + "]' value='0' placeholder=' Bs.' required'/></td>"; 
    
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='5' name='cantidad[" + posicionCampo + "]' value='0' onChange='javascript:calcula()' id='cantidad[" + posicionCampo + "]'/></td>";
    
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='15' name='total[" + posicionCampo + "]' value='' placeholder='' required id='total[" + posicionCampo + "]'/></td>";
 
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='button' id='eliminar' value='-' onclick='eliminarUsuario(this)' class='btn btn-danger'></td>"; 
    
    var copiar = document.getElementById("texto1");
    var pegar = document.getElementById("texto[" + posicionCampo + "]");
    pegar.value = copiar.value;
    
    
/*ESTA ES LA FUNCION QUE INTENTE PERO NO FUNCIONO*/
    function calcula(){
    var monto = document.getElementById("p_unitario[" + posicionCampo + "]");
    var canti = document.getElementById("cantidad[" + posicionCampo + "]");
    var calculo = monto * canti;
    
    document.getElementById("total[" + posicionCampo + "]").value = calculo;
    }
 
    posicionCampo++; 
 
} 
 
 
function eliminarUsuario(obj) { 
 
    var oTr = obj; 
 
    while(oTr.nodeName.toLowerCase() != 'tr') { 
 
        oTr=oTr.parentNode; 
 
    } 
 
    var root = oTr.parentNode; 
 
    root.removeChild(oTr); 
 
}
 

como ven esta comentada la función que intente realizar para la tarea pero no anda, cabe destacar que si esa misma función la utilizo con ciertas modificaciones para copiar el contenido de un input externo al form a otro dinamico denbtro del form, si funciona, si me pueden colaborar se los agradeceria bastante.

Gracias de antemano.

[Pantaláimon]

Te recomiendo que cambies de manual/curso para aprender javascript.

- Ya hace una eternidad que no se usan tablas para el maquetar páginas web.
- Las llamadas de javascript inline en el html es una mala praxis que, en mi opinión, los que empiezan a aprender a estas alturas ya no se les debería ni enseñar.
- Tu código pide a gritos unos cuantos bucles.
- Evita las variables globales en la medida de lo posible.

Un saludo!

[xfxstudios]

Se agradece tu recomendación y te aseguro que la voy a tomar en cuenta. Gracias, pero igual tengo que solucionar esto al cliente, yo programo es en php y resulta que esto está incrustado en la pagina y pues el cliente le encanta y como no trabajo con js no tengo ni idea de como solucionarle esto, si tuvieras alguna ideita de por donde empezar te lo agradeceria. Saludos y Gracias nuevamente!!

[Alexis88]

La función de cálculo no necesita ir dentro de la que crea la fila, pues, por cada clic, se volverá a declarar de manera innecesaria. Tenla por fuera.

Por otro lado, creo que lo conveniente sería que envíes la posición del campo como argumento a la función, puesto que su valor se modificará y no volverá a ser el mismo.

Un saludo

[xfxstudios]

bien lo posteo aqui mismo para no repetir, encontre este codigo que genera las filas con divs y realiza una suma pero no he podido hacer que me realice una multiplicacion entre el campo precio * cantidad, como les dije no soy muy diestro en esto de js, lo he intentado cambiando el cidgo por funciones logicas pero nada, creo que lo he esta asiendo mal, aqui el código:

Código Javascript:

//<![CDATA[
$(window).load(function(){
$('#calc>span').click(function(){
    $(this).parent().append('<p><input type="text" name="cantidad[]" /> <input type="text" name="precio[]" /> <input type="text" name="total[]" readonly="" /> </p>');
});
 
$('#calc').on('keyup','input',function(){
    var totalCost = 0; $(this).parent().find('input[name="cantidad[]"],input[name="precio[]"]').each(function(){
        
        if($(this).val()!=''){
           
            totalCost += parseInt($(this).val(),10);
        }
      });
    $(this).parent().find('input:last-child').val(totalCost+ ' Bs.');
});
});//]]>
 

si me pueden hechar una manita Muchisimas Gracias!!!