Sumar valores de input text de un formulario dinámico con jQuery

Acá les dejo un código que nos permite sumar valores de varios input text de un formulario utilizando jQuery. Este código me sirvió de mucha ayuda para poder realizar uno de mis proyectos gracias a Gorkau por la publicación de este articulo en la página http://nideaderedes.urlansoft.com/2012/11/27/jquery-sumar-los-input-de-un-formulario-dinamico/

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function calcular_total() {
	importe_total = 0
	$(".importe_linea").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	$("#total").val(importe_total);
}
 
function nueva_linea() {
	$("#lineas").append('<input type="text" class="importe_linea" value="0"/><br/>');
}
</script>
 
</head>
<body>
 
<form method="POST" action="nada.html">
	<div id="lineas">
		<input type="text" class="importe_linea" value="0"/><br/>
	</div>
	<label for="total">Total: <input type="text" id="total" value="0"/><br/>
	<input type="button" value="Nueva l&iacute;nea" onclick="nueva_linea()"/>
	<input type="button" value="Calcular" onclick="calcular_total()"/>
</form>
 
</body>
20101 Visto 28 Hoy

8 thoughts on “Sumar valores de input text de un formulario dinámico con jQuery”

  1. Hola amigo, quisiera saber como hacer para que funcione en un formulario dinamico en el que el imput se genera con nombres diferentes…
    veras en mi formulario el imput se genera con un “_N°” (ej: campo_1, campo_2, campo_3… campo_n) cada vez que añado un nuevo campo los diferencia de esa forma.

  2. Hola Nataral says, he modificado un poco el codigo tratando de mostrar como es que funciona con diferentes nombres, el unico problema seria el nombre para los nuevos campos generados…

    function calcular_total() {
    importe_total = 0
    $(“.importe_linea”).each(
    function(index, value) {
    importe_total = importe_total + eval($(this).val());
    }
    );
    $(“#total”).val(importe_total);
    }

    function nueva_linea() {
    $(“#lineas”).append(”);
    }

    Total:

    Espero y te pueda ayudar en algo.

  3. Perdón por el comentario anterior no coloque todo el código pero aqui está de nuevo

    function calcular_total() {
    importe_total = 0
    $(“.importe_linea”).each(
    function(index, value) {
    importe_total = importe_total + eval($(this).val());
    }
    );
    $(“#total”).val(importe_total);
    }

    function nueva_linea() {
    $(“#lineas”).append(”);
    }

    Total:

    suerte..

    1. function calcular_total() {
      importe_total = 0
      $(“.importe_linea”).each(
      function(index, value) {
      importe_total = importe_total + eval($(this).val());
      }
      );
      $(“#total”).val(importe_total);
      }

      function nueva_linea() {
      $(“#lineas”).append(”);
      }

      <input type="button" value="Nueva línea" ck=”nueva_linea()”/>
      Total:

  4. Hola, quizas usando selectores de jquery es mas facil. Si las lineas las vas a pasar por post y necesitas guardarlas con nombres diferentes se complicaria pero si solo las creas como unico objetivo de sumar valores podes usar el mismo atributo name en cada campo. y se reduce a esto:
    $(“input[name=’importe_renglon’]”).each(function() {
    Total+= parseFloat(this.value);
    });
    y listo tenes el total de todos los atributos que tengan ese name
    si ademas los queres pasar por post y todas las lineas van a ser un vector haces esto:
    $(“input[name=’importe_renglon[]’]”).each(function() {
    Total+= parseFloat(this.value);
    });
    Los selectores son increibles, espero les sirva tambien

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *