Skip to main content
se añadieron 8670 caracteres en el cuerpo
Origen Enlace
Joseph
  • 653
  • 6
  • 21

Mi inputhtml (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:

<script>(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($.bindopt.delete).length > 0) {
            jQuery('change'$.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",
});
</script>

Mi input:

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

Mi javascript:

<script>
    $(".price").bind('change',function () { 
        $(this).val(function(i, v) { return parseFloat(v).toFixed(2); });
    });
</script>

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",
};
Origen Enlace
Joseph
  • 653
  • 6
  • 21

¿Cómo convertir el número ingresado en decimal en todo el array?

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 input:

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

Mi javascript:

<script>
    $(".price").bind('change',function () { 
        $(this).val(function(i, v) { return parseFloat(v).toFixed(2); });
    });
</script>