0

Tengo un input en un formulario donde el usuario ingresa el precio del servicio, cuando el mismo hace keyup el número se convierte en decimal con la función javascript, pero actualmente me convierte el primer campo, no sé como agregarlo en un each para que realice la función en todos los campos.

Mi html (Dejé lo escencial del formulario para no extender el html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <table>
        <thead>
            <tr class="item-row">
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="item-row">
                <td class="col-2">
                    <input class="form-control price" name="price[]" id="price" placeholder="Precio" type="number">
                </td>
            </tr>
            <tr id="hiderow">
                <td colspan="6">
                    <a id="addRow" href="javascript:;" title="Add a row" class="btn btn-primary">Agregar ítem</a>
                </td>
            </tr>
        </tbody>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js" integrity="sha512-WBbdKQKeIQFarq1hrOxNL/gnp0Tqh25fn0z3X1po+ej8iuHhHdp6Sh9l+tghGw5L1bsvtzjeuSKsL80RW3XdYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="invoice.js"></script>

    <script>
        jQuery(document).ready(function(){
            jQuery().invoice({
                addRow : "#addRow",
                delete : ".delete",
                parentClass : ".item-row",

                price : ".price",
            });
        });
    </script>

</body>

Mi archivo javascript:

(function (jQuery) {
    $.opt = {};  // jQuery Object

    jQuery.fn.invoice = function (options) {
        var ops = jQuery.extend({}, jQuery.fn.invoice.defaults, options);
        $.opt = ops;

        var inv = new Invoice();
        inv.init();

        jQuery('body').on('click', function (e) {
            var cur = e.target.id || e.target.className;

            if (cur == $.opt.addRow.substring(1))
                inv.newRow();

            if (cur == $.opt.delete.substring(1))
                inv.deleteRow(e.target);

            inv.init();
        });

        jQuery('body').on('keyup', function (e) {
            inv.init();
        });

        return this;
    };
}(jQuery));

function Invoice() {
    self = this;
}

Invoice.prototype = {
    constructor: Invoice,

    init: function () {
        this.calcTotal();
        this.calcTotalQty();
        this.calcSubtotal();
        this.calcTax();
        this.calcDiscount();
        this.calcGrandTotal();
    },

    calcTotal: function () {
         jQuery($.opt.parentClass).each(function (i) {
             var row = jQuery(this);
             var total = row.find($.opt.price).val() * row.find($.opt.qty).val();

             total = self.roundNumber(total, 2);

             row.find($.opt.total).html(total);
         });

         return 1;
     },
    
    calcTotalQty: function () {
         var totalQty = 0;
         jQuery($.opt.qty).each(function (i) {
             var qty = jQuery(this).val();
             if (!isNaN(qty)) totalQty += Number(qty);
         });

         totalQty = self.roundNumber(totalQty, 2);

         jQuery($.opt.totalQty).html(totalQty);

         return 1;
     },

    calcSubtotal: function () {
         var subtotal = 0;
         jQuery($.opt.total).each(function (i) {
             var total = jQuery(this).html();
             if (!isNaN(total)) subtotal += Number(total);
         });

         subtotal = self.roundNumber(subtotal, 2);

         jQuery($.opt.subtotal).html(subtotal);
         jQuery($.opt.subtotal_form).val(subtotal);

         return 1;
     },

    calcTax: function () {
        var tax = 0;
        var tax = (Number(jQuery($.opt.subtotal).html())
                       * 7.7) / 100;
        tax = self.roundNumber(tax, 2);

        jQuery($.opt.tax).html(tax);
        jQuery($.opt.tax_form).val(tax);

        return 1;
    },

    calcDiscount: function () {
        var discount = 0;
        var total_discount_form = 0;
        var total_discount_form = ((Number(jQuery($.opt.subtotal).html())
                           + Number(jQuery($.opt.tax).html()))
                           * Number(jQuery($.opt.discount).val())) / 100;
        total_discount_form = self.roundNumber(total_discount_form, 2);

        jQuery($.opt.total_discount_form).html(total_discount_form);
        jQuery($.opt.total_discount_form).val(total_discount_form);

        return 1;
    },

    calcGrandTotal: function () {
        var grand_total = Number(jQuery($.opt.subtotal).html())
                       + Number(jQuery($.opt.tax).html())
                       - Number(jQuery($.opt.total_discount_form).html());
        grand_total = self.roundNumber(grand_total, 2);

        jQuery($.opt.grand_total).html(grand_total);
        jQuery($.opt.grand_total_form).val(grand_total);

        return 1;
    },

    newRow: function () {
        jQuery(".item-row:last").after('<tr class="item-row"><td class="col-2"><input class="form-control price" name="price[]" id="price" placeholder="Precio" type="number"></td></tr>');
        
        if (jQuery($.opt.delete).length > 0) {
            jQuery($.opt.delete).show();
        }

        return 1;
    },

    deleteRow: function (elem) {
        jQuery(elem).parents($.opt.parentClass).remove();

        if (jQuery($.opt.delete).length < 1) {
            jQuery($.opt.delete).hide();
        }

        return 1;
    },

    roundNumber: function (number, decimals) {
        var newString;// The new rounded number
        decimals = Number(decimals);

        if (decimals < 1) {
            newString = (Math.round(number)).toString();
        } else {
            var numString = number.toString();

            if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
                numString += ".";// give it one at the end
            }

            var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
            var d1 = Number(numString.substring(cutoff, cutoff + 1));// The value of the last decimal place that we'll end up with
            var d2 = Number(numString.substring(cutoff + 1, cutoff + 2));// The next decimal, after the last one we want

            if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
                if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
                    while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
                        if (d1 != ".") {
                            cutoff -= 1;
                            d1 = Number(numString.substring(cutoff, cutoff + 1));
                        } else {
                            cutoff -= 1;
                        }
                    }
                }

                d1 += 1;
            }

            if (d1 == 10) {
                numString = numString.substring(0, numString.lastIndexOf("."));
                var roundedNum = Number(numString) + 1;
                newString = roundedNum.toString() + '.';
            } else {
                newString = numString.substring(0, cutoff) + d1.toString();
            }
        }

        if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
            newString += ".";
        }

        var decs = (newString.substring(newString.lastIndexOf(".") + 1)).length;

        for (var i = 0; i < decimals - decs; i++)
            newString += "0";
        //var newNumber = Number(newString);// make it a number if you like

        return newString; // Output the result to the form field (change for your purposes)
    }
};

// La ayuda que me dieron aquí en la pregunta

$(".item-row").on('change', '.price', function () {
    $(this).val(function (i, v) {
        return parseFloat(v).toFixed(2);
    })
});

jQuery.fn.invoice.defaults = {
    addRow: "#addRow",
    delete: ".delete",
    parentClass: ".item-row",

    price: ".price",
};
4
  • No se comprende el problema. Tu función se va a aplicar sobre todos los <input class="price">. ¿A qué te refieres con que solamente se te aplica al primero? ¿Es que quizá el resto de tus input los generas de forma dinámica?
    – phpMyGuel
    Commented el 29 oct. 2021 a las 12:51
  • Intenta cambiar id="price" por class="price" Commented el 29 oct. 2021 a las 13:02
  • @phpMyGuel Exacto, los demás inputs (price) los agrego dinámicamente, y la funcion javascript solo toma el primero, me imagino que debo hacer un each para recorrerlo, pero no sé como, ya que al tener más de un campo price, se agregan a un array.
    – Joseph
    Commented el 29 oct. 2021 a las 13:07
  • @AndresAranda ya tengo definido price en class
    – Joseph
    Commented el 29 oct. 2021 a las 13:08

2 respuestas 2

2

La verdad es que hay muchas formas de resolver este tipo de problemas, puedes agregar un identificador único dinámicamente, puedes agregar el atributo onchange="myFunction()" directamente en el input, puedes definir el método onchage cuando agregas el elemento dinámicamente o puedes agregar el evento al elemento padre con .on de Jquery

$(padre).on('evento', '.elemento', function() {//tu código});

$("#myDiv").on('change', '.price', function () {
    $(this).val(function (i, v) {
        return parseFloat(v).toFixed(2);
    })
});


$("#agregar").on('click',
    function () {
        $("#myDiv").append('<input class="form-control price" name="price[]" class="price" placeholder="Precio" type="number">');
    }
);
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<div id="myDiv">
    <input class="form-control price" name="price[]" class="price" placeholder="Precio" type="number">
</div>

<br>
<input type="button" value="Agregar" id="agregar" />

3
  • Gracias, lo estoy adaptando a mí código pero aún me funciona solo para el primer campo, actualicé la pregunta.
    – Joseph
    Commented el 29 oct. 2021 a las 18:40
  • @Joseph con el elemento padre me refería al elemento contenedor es decir al elemento que contiene todos los input en el caso del ejemplo puedes ver que era el div#myDiv, para tu caso según veo seria el tbody, en el código que dejaste arriba seria remplazar .item-row por tbody Fiddle Commented el 31 oct. 2021 a las 15:05
  • Entiendo, muchas gracias! Sí... Ahora funciona correctamente.
    – Joseph
    Commented el 1 nov. 2021 a las 13:13
1

El problema no es tener que recorrer los elementos, jQuery lo hace automáticamente, en todos los elementos que encuentra (es decir, los que existen a la hora de llamar el event binder). Esa parte del script corre al cargar la pagina y solo existe un input, si agregas inputs de forma dinámica, tienes que ponerles eventos de forma dinámica también.

Ej, si tienes una función que añade un input, puedes ponerle el evento:

const el = $('div').addClass('price');
const $(parent).appendChild(el);
el.on('click', function { 
    // tu función
})

2
  • okey, si entendí bien sería así: const el = $('item-row').addClass('price'); const $(parent).appendChild(el); el.on('click', function { $(".price").bind('change',function () { $(this).val(function(i, v) { return parseFloat(v).toFixed(2); }); }); }) Pero no funciona, ahora nisiquiera el primero.
    – Joseph
    Commented el 29 oct. 2021 a las 14:06
  • Gracias, lo estoy adaptando a mí código pero aún me funciona solo para el primer campo, actualicé la pregunta.
    – Joseph
    Commented el 29 oct. 2021 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.