What is a promise in Javascript?

Question

ByGroxD

Asked: 2020-09-20 04:36:41 +0800 CST 2020-09-20 04:36:41 +0800 CST 2020-09-20 04:36:41 +0800 CST

JQUERY - Sum of dynamic INPUTS with CONDITIONAL

772

Hello fellow StackOverFlow,

I come across the following question:

How can I add all of them inputwith name VN_TOTAL[] when the input with name VN_GRABIVA[] of the same row of the table is empty or equal to zero.

Said total I need to save in the inputwith ID siniva .

In the same way, I need to add all of them inputwith name VN_TOTAL[] when the input with name VN_GRABIVA[] of the same row of the table has a value greater than zero.

I need this sum in the input with ID coniva .

In the following image I show the result that I am looking for as an example:

https://i.ibb.co/CsbfqZ1/zrmrf.jpg

$(document).ready(function() {
    var tr = 2;
    $('#addrowdte').on("click", function() {
        $(".details-dte").append('<tr id="'+tr+'"> <td><button onclick="remove_tr('+tr+')" class="btn btn-default btn-sm"><i class="fas fa-trash"></i></button> </td> <td> <input onkeyup="subtotal('+tr+');" type="text" class="input-sm separ-miles cantidad'+tr+'" name="VN_CANTIDA[]" value=""> </td> <td> <div class="input-group"> <input style="min-width: 100px;" type="text" class="form-control input-sm" required="required" id="ADD_CODIGO'+tr+'" name="VN_CODPRO[]" value=""> <a data-toggle="modal" data-target="#modal-search-product" onclick="getrowid('+tr+');" class="input-group-addon input-sm"><i class="fas fa-search"></i></a> </div> </td> <td> <input id="ADD_DETALLE'+tr+'" type="text" class="input-sm" name="VN_DETALLE[]" value=""> </td> <td> <input id="ADD_VALUNI'+tr+'" type="text" class="input-sm separ-miles precio'+tr+'" name="VN_VALUNI[]" value=""> </td> <td> <input type="text" class="input-sm separ-miles subtotal'+tr+'" name="VN_PARCIAL[]" value=""> </td> <td> <input onkeyup="get_total('+tr+');" type="text" class="input-sm separ-miles descuento'+tr+'" name="VN_TASADES[]" placeholder="00,00"> </td> <td> <input id="ADD_VALIVA'+tr+'" type="text" class="input-sm separ-miles iva'+tr+'" name="VN_GRABIVA[]" value=""> </td> <td> <input type="text" class="input-sm separ-miles total'+tr+'" name="VN_TOTAL[]" value=""> </td> </tr>');
        tr++;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-condensed table-bordered table-hover table-striped">
    <thead class="bg-info text-white">
        <tr>
            <td class="text-center"><a id="addrowdte" class="btn btn-warning btn-xs"><i class="fas fa-plus"></i></a>
            </td>
            <th>CANTIDAD</th>
            <th>CODIGO</th>
            <th>NOMBRE</th>
            <th>PRECIO</th>
            <th>SUB TOTAL</th>
            <th>DCTO %</th>
            <th>IVA %</th>
            <th>TOTAL</th>
        </tr>
    </thead>
    <tbody class="details-dte">
        <tr id="1">
            <td>
                <button onclick="remove_tr(1)" class="btn btn-default btn-sm"><i class="fas fa-trash"></i>
                </button>
            </td>
            <td>
                <input onkeyup="subtotal(1);" type="text" class="input-sm separ-miles cantidad1" name="VN_CANTIDA[]" value="">
            </td>
            <td>
                <div class="input-group">
                    <input style="min-width: 100px;" type="text" class="form-control input-sm" required="required" id="ADD_CODIGO1" name="VN_CODPRO[]" value="">
                    <a data-toggle="modal" data-target="#modal-search-product" onclick="getrowid(1);" class="input-group-addon input-sm"><i class="fas fa-search"></i></a>
                </div>
            </td>
            <td>
                <input id="ADD_DETALLE1" type="text" class="input-sm" name="VN_DETALLE[]" value="">
            </td>
            <td>
                <input id="ADD_VALUNI1" type="text" class="input-sm separ-miles precio1" name="VN_VALUNI[]" value="">
            </td>
            <td>
                <input type="text" class="input-sm separ-miles subtotal1" name="VN_PARCIAL[]" value="">
            </td>
            <td>
                <input onkeyup="get_total(1);" type="text" class="input-sm separ-miles descuento1" name="VN_TASADES[]" placeholder="00,00">
            </td>
            <td>
                <input id="ADD_VALIVA1" type="text" class="input-sm separ-miles iva1" name="VN_GRABIVA[]" value="">
            </td>
            <td>
                <input type="text" class="input-sm separ-miles total1" name="VN_TOTAL[]" value="">
            </td>
        </tr>
    </tbody>
</table>
<script>
    function remove_tr(id) {
        event.preventDefault();
        if (id != 1) {
            $('#' + id).remove();
        }
    }

    function subtotal(idrow) {
        var rowid = idrow;
        var cantidad, precio, total, iva;
        if ($('.cantidad' + rowid).val().length > 0) {
            cantidad = parseFloat($('.cantidad' + rowid).val());
        } else {
            cantidad = 0;
        }
        if ($('.precio' + rowid).val().length > 0) {
            precio = parseFloat($('.precio' + rowid).val());
        } else {
            precio = 0;
        }
        total = (precio * cantidad);
        $('.subtotal' + rowid).val(total);

        if ($('.iva' + rowid).val().length > 0) {
            iva = parseFloat($('.iva' + rowid).val());
            iva = (total * iva / 100);
            total = (total + iva);
        }

        $('.total' + rowid).val(total);
    };

    function get_total(idrow) {
        var rowid = idrow;
        var subtotal, descuento, total, iva;
        subtotal = parseFloat($('.subtotal' + rowid).val());
        if ($('.descuento' + rowid).val().length <= 0) {
            descuento = 0;
        } else {
            descuento = parseFloat($('.descuento' + rowid).val());
        }
        total = (subtotal * descuento / 100);
        total = (subtotal - total);
        if ($('.iva' + rowid).val().length > 0) {
            iva = parseFloat($('.iva' + rowid).val());
            iva = (total * iva / 100);
            total = (total + iva);
        }
        $('.total' + rowid).val(total);

    }
</script><br>
<span>Total sin iva:</span>
<input type="text" id="siniva" value="">
<br><br>
<span>Total con iva:</span>
<input type="text" id="coniva" value="">

Any questions or news I will be very aware.

2 Answers

Voted

ElChiniNet · Answer 1 · 2020-09-26T03:04:32+08:00

One solution is that every time you vary the amounts, you update a property in the total input corresponding to the row you are modifying, so that when you go through all the inputs to calculate the total amount, you can discern between adding the amount to the field with VAT or to the field without VAT.

Something like that:

// Cada vez que se modifique el campo de IVA
$totalCorrespondiente.data({
    tieneIVA: !!valordeIva,
    total: valordeTotal
});

Later when you need to calculate the totals you can iterate through all the total inputs to add their values taking into account the flag tieneIVA:

var $totales = $tableDetails.find('tr input[name="VN_TOTAL[]"]').toArray();
var totales = $totales.reduce(function (obj, input) {
    var $input = $(input);
    if ($input.data('tieneIVA')) {
        obj.coniva += $input.data('total');
    } else {
        obj.siniva += $input.data('total');
    }
    return obj;
}, {coniva: 0, siniva: 0});

$totalSinIVA.val(totales.siniva);
$totalConIVA.val(totales.coniva);

Here is your code with this change:

I have made some variations to the code that I think could be useful to you, but they are not related to your question, so I will leave them at the end of the snippet. These recommendations are based on my experience and my personal opinion, take from them what you deem appropriate.

var template = $('#tableRow').html();
var tr = 1;
var $tableDetails = $('.details-dte');
var $totalSinIVA = $('#siniva');
var $totalConIVA = $('#coniva');

// Función para añadir una fila variando el HTML del template
function addRow(index) {
  $tableDetails.append(template.replace(/\{\{tr-index\}\}/g, index));
}

// Añadir la primera fila por defecto
addRow(++tr);

// Devolver el valor de un input o 0 si no tiene valor
function parseValue() {
  return isNaN(this.val()) || +this.val() === 0 ? 0 : +this.val();
}

$('#addrowdte').on('click', function() {
  addRow(++tr);
});

// Eliminar fila 
$tableDetails.on('click', 'tr button', function () {
  var $button = $(this);
  $button.closest('tr').remove();
});

// Calcular los totales de todas las filas
function calcularTotales () {
  var $totales = $tableDetails.find('tr input[name="VN_TOTAL[]"]').toArray();
  var totales = $totales.reduce(function (obj, input) {
    var $input = $(input);
    if ($input.data('tieneIVA')) {
      obj.coniva += ($input.data('total') || 0);
    } else {
      obj.siniva += ($input.data('total') || 0);
    }
    return obj;
  }, {coniva: 0, siniva: 0});
  $totalSinIVA.val(totales.siniva);
  $totalConIVA.val(totales.coniva);
}

var inputs = ['VN_CANTIDA[]', 'VN_VALUNI[]', 'VN_TASADES[]', 'VN_GRABIVA[]'].map(function (iname) {
  return 'tr input[name="' + iname + '"]';
});

$tableDetails.on('keyup', inputs.join(','), function () {
  var $input = $(this);
  var $row = $input.closest('tr');
  var $quantity = $row.find('input[name="VN_CANTIDA[]"]');
  var $precio = $row.find('input[name="VN_VALUNI[]"]');
  var $descuento = $row.find('input[name="VN_TASADES[]"]');
  var $iva = $row.find('input[name="VN_GRABIVA[]"]');
  var $subtotal = $row.find('input[name="VN_PARCIAL[]"]'); 
  var $total = $row.find('input[name="VN_TOTAL[]"]');
  
  var cantidad = parseValue.call($quantity);
  var precio = parseValue.call($precio);
  var descuento = parseValue.call($descuento);
  var iva = parseValue.call($iva);
  var subtotal = cantidad * precio;
  var totalConDescuento = subtotal - subtotal * (descuento / 100);
  var total = totalConDescuento + totalConDescuento * (iva / 100);
  
  // Guardar el total y si tiene o no iva en el campo VN_TOTAL[]  
  $total.data({
    total: total,
    tieneIVA: !!iva
  });
  
  // Aplicar cálculos
  $subtotal.val(subtotal);
  $total.val(total); 
  
  // Calcular los totales
  calcularTotales();
  
});

.details-dte tr:nth-child(1) button {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-bordered table-hover table-striped">
  <thead class="bg-info text-white">
    <tr>
      <td class="text-center"><a id="addrowdte" class="btn btn-warning btn-xs"><i class="fas fa-plus"></i></a>
      </td>
      <th>CANTIDAD</th>
      <th>CODIGO</th>
      <th>NOMBRE</th>
      <th>PRECIO</th>
      <th>SUB TOTAL</th>
      <th>DCTO %</th>
      <th>IVA %</th>
      <th>TOTAL</th>
    </tr>
  </thead>
  <tbody class="details-dte">
  </tbody>
</table>
<br>
<span>Total sin iva:</span>
<input type="text" id="siniva" value="">
<br><br>
<span>Total con iva:</span>
<input type="text" id="coniva" value="">

<template id="tableRow">
  <tr>
    <td>
      <button class="btn btn-default btn-sm">
        <i class="fas fa-trash"></i>
      </button>
    </td>
    <td>
      <input type="text" class="input-sm separ-miles cantidad-{{tr-index}}" name="VN_CANTIDA[]" value="">
    </td>
    <td>
      <div class="input-group">
        <input style="min-width: 100px;" type="text" class="form-control input-sm" required="required" name="VN_CODPRO[]" value="">
        <a data-toggle="modal" data-target="#modal-search-product" class="input-group-addon input-sm">
          <i class="fas fa-search"></i>
        </a>
      </div>
    </td>
    <td>
      <input type="text" class="input-sm" name="VN_DETALLE[]" value="">
    </td>
    <td>
      <input type="text" class="input-sm separ-miles precio-{{tr-index}}" name="VN_VALUNI[]" value="">
    </td>
    <td>
      <input type="text" class="input-sm separ-miles subtotal-{{tr-index}}" name="VN_PARCIAL[]" value="">
    </td>
    <td>
      <input type="text" class="input-sm separ-miles descuento-{{tr-index}}" name="VN_TASADES[]" placeholder="00,00">
    </td>
    <td>
      <input type="text" class="input-sm separ-miles iva-{{tr-index}}" name="VN_GRABIVA[]" value="">
    </td>
    <td>
      <input type="text" class="input-sm separ-miles total-{{tr-index}}" name="VN_TOTAL[]" value="">
    </td>
  </tr>
</template>

Tips that may help you and that I have included in the code, so you can see the implementation of these there:

Intenta siempre que puedas, separar el código HTML del código JavaScript y viceversa (a no ser que estés trabajando con JSX). Si quieres usar un template determinado que vas a utilizar de manera contínua en el código, una técnica que puedes utilizar es situar el HTML correspondiente a dicho template dentro de una etiqueta template o incluso dentro de una etiqueta script de tipo template. Esto hará que el código del template sea más fácil de leer y modificar. Si te hace falta que ciertas variables en el template sean dinámicas, podrías situar placeholders para remplazarlos con parámetros con un simple replace.

En la misma línea de esta recomendación, intenta añadir los eventos JavaScript, desde el código JavaScript en vez de directo en el HTML. En vez de añadir un evento por cada botón o input de cada fila (que van aumentando a medida que aumentan las filas), puedes, mediante delegación de eventos añadir dicho evento solo una vez y funcionará sin importar la cantidad de filas que tenga la tabla.

Intenta siempre que puedas hacer caching en variables de los objetos jQuery si estos objetos los vas a usar de manera contínua en el código. Cada vez que llamas a $("selector"), jQuery necesita recorrer el DOM para buscar y seleccionar dicho elemento, por lo que esto tiene un coste. Solo usa los selectores dentro de la lógica del código si los elementos que estás intentando seleccionar son dinámicos y pueden cambiar, pero si los elementos son fijos, asígnalos a variables y usa esas variables en su lugar, así la búsqueda del elemento y este coste de procesamiento se realiza solo una vez.

Si vas a repetir un código más de una vez, debes plantearte si no es mejor usar una función para realizar la funcionalidad de esa lógica. En tu código tienes múltiples lugares en los que chequeas si el valor de un input tiene una longitud mayor que 0 para dependiendo de esto aplicarle un parseFloat. Puedes crear una pequeña función para esto y aplicarla cada vez que quieras hacerlo (tu código será más sencillo de leer y de escalar).

Intenta no tener en la interfaz elementos que al interactuar con ellos ignoras la interacción del usuario con JavaScript, esto es confuso para el usuario porque su interacción no es respetada. En su lugar puedes mediante CSS cambiar la apariencia de los elementos con los que no se puede interactuar. En el código oculté el ícono de borrar de la primera fila, esto no es ideal, lo ideal sería no mostrar el ícono si hay solo una fila o mostrarlos si hay más de una (el usuario debe poder borrar la primera fila si lo desea), pero aunque no es ideal, es mejor solución que mostrar el ícono de borrar e ignorarlo con JavaScript si se se trata de la primera fila.

Carmen · Answer 2 · 2020-09-20T05:53:45+08:00

About the code that you have, it can be done by going through each row (tr) and looking if the VAT field is empty, depending on this field we add to the quantity of prices with VAT or to the quantity of prices without VAT. I add a simple example in which the function is executed when you click on 'calculate totals', once the VAT field and total of the rows are filled. Hope this can help you.

$(document).ready(function() {
    var tr = 2;
    $('#addrowdte').on("click", function() {
        $(".details-dte").append('<tr id="'+tr+'"> <td><button onclick="remove_tr('+tr+')" class="btn btn-default btn-sm"><i class="fas fa-trash"></i></button> </td> <td> <input onkeyup="subtotal('+tr+');" type="text" class="input-sm separ-miles cantidad'+tr+'" name="VN_CANTIDA[]" value=""> </td> <td> <div class="input-group"> <input style="min-width: 100px;" type="text" class="form-control input-sm" required="required" id="ADD_CODIGO'+tr+'" name="VN_CODPRO[]" value=""> <a data-toggle="modal" data-target="#modal-search-product" onclick="getrowid('+tr+');" class="input-group-addon input-sm"><i class="fas fa-search"></i></a> </div> </td> <td> <input id="ADD_DETALLE'+tr+'" type="text" class="input-sm" name="VN_DETALLE[]" value=""> </td> <td> <input id="ADD_VALUNI'+tr+'" type="text" class="input-sm separ-miles precio'+tr+'" name="VN_VALUNI[]" value=""> </td> <td> <input type="text" class="input-sm separ-miles subtotal'+tr+'" name="VN_PARCIAL[]" value=""> </td> <td> <input onkeyup="get_total('+tr+');" type="text" class="input-sm separ-miles descuento'+tr+'" name="VN_TASADES[]" placeholder="00,00"> </td> <td> <input id="ADD_VALIVA'+tr+'" type="text" class="input-sm separ-miles iva'+tr+'" name="VN_GRABIVA[]" value=""> </td> <td> <input type="text" class="input-sm separ-miles total'+tr+'" name="VN_TOTAL[]" value=""> </td> </tr>');
        tr++;
    });
});


function CalcularTotales() {
var totalconiva = 0;
var totalsiniva = 0;
  $(".details-dte").find("tr").each(function(){
    var filaconiva = 0;
    $(this).find("input:text").each(function(){
      if ($(this).attr("name")=="VN_GRABIVA[]") {
        if ($(this).val()!="" && $(this).val()!="0") {
           filaconiva = 1; 
        }
      }
      if ($(this).attr("name")=="VN_TOTAL[]") {
        //alert($(this).val());
        if (filaconiva==1) { 
          totalconiva = totalconiva + parseInt($(this).val());
        } else { 
          totalsiniva = totalsiniva + parseInt($(this).val());
        }
      }
    });
  });

  $("#siniva").val(totalsiniva);
  $("#coniva").val(totalconiva);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-condensed table-bordered table-hover table-striped">
    <thead class="bg-info text-white">
        <tr>
            <td class="text-center"><a id="addrowdte" class="btn btn-warning btn-xs"><i class="fas fa-plus"></i></a>
            </td>
            <th>CANTIDAD</th>
            <th>CODIGO</th>
            <th>NOMBRE</th>
            <th>PRECIO</th>
            <th>SUB TOTAL</th>
            <th>DCTO %</th>
            <th>IVA %</th>
            <th>TOTAL</th>
        </tr>
    </thead>
    <tbody class="details-dte">
        <tr id="1">
            <td>
                <button onclick="remove_tr(1)" class="btn btn-default btn-sm"><i class="fas fa-trash"></i>
                </button>
            </td>
            <td>
                <input onkeyup="subtotal(1);" type="text" class="input-sm separ-miles cantidad1" name="VN_CANTIDA[]" value="">
            </td>
            <td>
                <div class="input-group">
                    <input style="min-width: 100px;" type="text" class="form-control input-sm" required="required" id="ADD_CODIGO1" name="VN_CODPRO[]" value="">
                    <a data-toggle="modal" data-target="#modal-search-product" onclick="getrowid(1);" class="input-group-addon input-sm"><i class="fas fa-search"></i></a>
                </div>
            </td>
            <td>
                <input id="ADD_DETALLE1" type="text" class="input-sm" name="VN_DETALLE[]" value="">
            </td>
            <td>
                <input id="ADD_VALUNI1" type="text" class="input-sm separ-miles precio1" name="VN_VALUNI[]" value="">
            </td>
            <td>
                <input type="text" class="input-sm separ-miles subtotal1" name="VN_PARCIAL[]" value="">
            </td>
            <td>
                <input onkeyup="get_total(1);" type="text" class="input-sm separ-miles descuento1" name="VN_TASADES[]" placeholder="00,00">
            </td>
            <td>
                <input id="ADD_VALIVA1" type="text" class="input-sm separ-miles iva1" name="VN_GRABIVA[]" value="">
            </td>
            <td>
                <input type="text" class="input-sm separ-miles total1" name="VN_TOTAL[]" value="">
            </td>
        </tr>
    </tbody>
</table>
<script>
    function remove_tr(id) {
        event.preventDefault();
        if (id != 1) {
            $('#' + id).remove();
        }
    }

    function subtotal(idrow) {
        var rowid = idrow;
        var cantidad, precio, total, iva;
        if ($('.cantidad' + rowid).val().length > 0) {
            cantidad = parseFloat($('.cantidad' + rowid).val());
        } else {
            cantidad = 0;
        }
        if ($('.precio' + rowid).val().length > 0) {
            precio = parseFloat($('.precio' + rowid).val());
        } else {
            precio = 0;
        }
        total = (precio * cantidad);
        $('.subtotal' + rowid).val(total);

        if ($('.iva' + rowid).val().length > 0) {
            iva = parseFloat($('.iva' + rowid).val());
            iva = (total * iva / 100);
            total = (total + iva);
        }

        $('.total' + rowid).val(total);
    };

    function get_total(idrow) {
        var rowid = idrow;
        var subtotal, descuento, total, iva;
        subtotal = parseFloat($('.subtotal' + rowid).val());
        if ($('.descuento' + rowid).val().length <= 0) {
            descuento = 0;
        } else {
            descuento = parseFloat($('.descuento' + rowid).val());
        }
        total = (subtotal * descuento / 100);
        total = (subtotal - total);
        if ($('.iva' + rowid).val().length > 0) {
            iva = parseFloat($('.iva' + rowid).val());
            iva = (total * iva / 100);
            total = (total + iva);
        }
        $('.total' + rowid).val(total);

    }
</script><br>
<span>Total sin iva:</span>
<input type="text" id="siniva" value="">
<br><br>
<span>Total con iva:</span>
<input type="text" id="coniva" value="">
<br><br>
<div onclick="CalcularTotales()">Calcular Totales</div>

JQUERY - Sum of dynamic INPUTS with CONDITIONAL

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?