JQuery - Calcular Total de una tabla

 
Vista:
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por José Maria (7 intervenciones) el 12/09/2018 01:08:07
Buenas amigos, llevo ya demasiado dándole vueltas a este código y sé que el fallo tiene que ser un pequeño detalle, pero no soy capaz de verlo.

Os comento tengo un formulario que le das al boton añadir y te crea un nuevo input.
Mi idea es sumar todos esos input y crear un total.

el caso es que quiero que si el usuario cambia la cantidad, me cambie el total tambien, lo consigo pero solo con el primer input, con los que voy añadiendo ya no, me hace la suma correcta, pero tengo que borrar los datos del primero o hacer algo para que calcule el nuevo total.

Os dejo el codigo a ver si alguien puede ayudarme:

EL HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container col-xs-12">
    <h2 align="center">CALCULAR TOTAL</h2>
    <div class="form-group">
         <form name="add_name" id="add_name">
 
            <div class="alert alert-danger print-error-msg" style="display:none">
            <ul></ul>
            </div>
 
            <div class="alert alert-success print-success-msg" style="display:none">
            <ul></ul>
            </div>
 
            <div class="table-responsive" id="tabladinamica">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                        <td><input type="number" name="number[]" placeholder="Introduce un numero" class="form-control numero" /></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Añadir</button></td>
                    </tr>
                </table>
                <div class="form-group">
 
                  {{ Form::label('TOTAL') }}
                <input type="text" name="total" readonly  class="form-control" id="total" />
 
                </div>
                 <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
 
            </div>
 
         </form>
    </div>
</div>



y el script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
 
    $(document).ready(function(){
      var postURL = "<?php echo url('addmore'); ?>";
      var i=1;
 
      $('#add').click(function(){  /*Al hacer clic en el boton de añadir me añade los elementos necesarios para añadir*/
           i++;
           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="number" name="number[]" placeholder="Introduce un numero" class="form-control numero"/></td></tr>');
 
      });
 
 
      $(document).on('click', '.btn_remove', function(){   /*Al hacer clic en borrar, borramos la fila creada*/
           var button_id = $(this).attr("id");
           $('#row'+button_id+'').remove();
      });
 
 
      // Me creo una funcion para sumar el array que contiene los numeros
 
      $('.numero').each(function () {
          $(this).keyup(function () {
              //Iniciamos la variable a 0
              var total = 0;
               $('.numero').each(function () {
                   if(!isNaN(this.value) && this.value.length != 0) {
                      total += parseFloat(this.value);
                    }
               });
 
              $('#total').val(total.toFixed(2));
          });
      });
 
    });
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por xve (673 intervenciones) el 12/09/2018 08:28:41
Hola José, haber si te sirve así...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
$(document).ready(function(){
      var postURL = "<?php echo url('addmore'); ?>";
      var i=1;
 
      $('#add').click(function(){  /*Al hacer clic en el boton de añadir me añade los elementos necesarios para añadir*/
           i++;
           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="number" name="number[]" placeholder="Introduce un numero" class="form-control numero"/></td></tr>');
           sumar();
 
      });
 
 
      $(document).on('click', '.btn_remove', function(){   /*Al hacer clic en borrar, borramos la fila creada*/
           var button_id = $(this).attr("id");
           $('#row'+button_id+'').remove();
      });
 
 
      // Me creo una funcion para sumar el array que contiene los numeros
     function sumar()
     {
      $('.numero').each(function () {
          $(this).keyup(function () {
              //Iniciamos la variable a 0
              var total = 0;
               $('.numero').each(function () {
                   if(!isNaN(this.value) && this.value.length != 0) {
                      total += parseFloat(this.value);
                    }
               });
 
              $('#total').val(total.toFixed(2));
          });
      });
    }
 
});
</script>

He añadido la función sumar() y la llamo dentro de $('#add').click...

Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por José Maria (7 intervenciones) el 12/09/2018 12:55:50
Que va hace lo mismo.

Solo aplica la suma en el primer input, los que voy añadiendo no se calcula el total automáticamente, lo raro es que si le doy a añadir por ejemplo 5 inputs, si luego vuelvo a hacer cualquier cambio en el input inicial si me hace el total, pero solo con ese primer input, con los demás me detecta que hay un número pero no me aplica la función, no sé si me explico bien.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por José Maria (7 intervenciones) el 12/09/2018 14:58:45
Me respondo a mi mismo, el problema estaba en que no me seleccionaba TODOS los input, solo el primero, era un fallo de selección de elementos.

dejo la solución para el que la quiera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function sumar()
{
  $('#dynamic_field .numero').each(function () {
      $(this).keyup(function () {
          //Iniciamos la variable a 0
          var total = 0;
           $('#dynamic_field .numero').each(function () {
               if(!isNaN(this.value) && this.value.length != 0) {
                  total += parseFloat(this.value);
                }
           });
 
          $('#total').val(total.toFixed(2));
      });
  });
}


La duda que me surge ahora es como haría para que al pulsar un botoncito por ejemplo este que añadire:

1
<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button>

Y al eliminar cualquier input que me vaya restando, no me hace nada, alguna idea?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por xve (673 intervenciones) el 12/09/2018 17:49:27
Gracias por compartirlo!!!



Sobre tu pregunta... en tu código esto creo que esta mal ....id="'+i+'"...
Para concatenar con el signo + tiene que ser código de javascript... en html, no puedes utilizar variables.

Exactamente que quieres hacer?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Calcular Total de una tabla

Publicado por José Maria (7 intervenciones) el 12/09/2018 18:07:15
Creo que esta bien amigo, lo que hace es ir dandole un 1,2,3,4 de id a cada botoncito.

Lo que queria hacer ya lo he resuelto.
simplemente cuando le doy a borrar borro el total y hago un reclaculo de todo y listo.

Gracias por la ayuda y tu tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar