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",
};
<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?id="price"
porclass="price"
price
enclass