I have problem when adding input dynamically with thousand separator, when I click add and the input form appears. it should be when I type the number it will be arranged in thousand separator. Please help me
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" onkeypress="return event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46" /></td>';
html += '</tr>';
$('#item_table').append(html);
});
$('input.inputnumber').keyup(function(event) {
if (event.which >= 37 && event.which <= 40) return;
$(this).val(function(index, value) {
return value
// Keep only digits and decimal points:
.replace(/[^\d.]/g, "")
// Remove duplicated decimal point, if one exists:
.replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3')
// Keep only two digits past the decimal point:
.replace(/\.(\d{2})\d+/, '.$1')
// Add thousands separators:
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-repsonsive">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
</tr>
</table>
</div>You can use the NumberFormat object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" ></td>';
html += '</tr>';
$('#item_table').append(html);
});
$('#item_table').change(function(event) {
if (event.target.classList.contains("inputnumber")) {
// remove any commas from earlier formatting
const value = event.target.value.replace(/,/g, '');
// try to convert to an integer
const parsed = parseInt(value);
// check if the integer conversion worked and matches the expected value
if (!isNaN(parsed) && parsed == value) {
// update the value
event.target.value = new Intl.NumberFormat('en-US').format(value);
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-repsonsive">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
</tr>
</table>
</div>I would use the Intl.NumberFormat() constructor. You can find the docs and all the different options here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
In the snippet below, you will see the formatting change as you type. If you add in text, it will just delete out the text. If you add in a second decimal, it won't do anything at first I've forgotten most of the jQuery I once knew, so I wrote the snippet in Vanilla JS. I included comments on each line to explain the step.
const table = document.querySelector(`#item_table`);
// Add an event listener to the button in the form
table.querySelector(`button`).addEventListener(`click`, function() {
// Create a <tr> element
const tr = document.createElement(`tr`);
// Create a <td> element
const td = document.createElement(`td`);
// Create an <input> element
const inpt = document.createElement(`input`);
// Add the input attributes
inpt.type = `text`;
inpt.classList.add(`form-control`);
inpt.classList.add(`inputnumber`);
// Add an event listener to the input element
inpt.addEventListener(`keyup`, function(event) {
// Current string value of the input
const value = this.value;
// Split the value string into an array on each decimal and
// count the number of elements in the array
const decimalCount = value.split(`.`).length - 1;
// Don't do anything if a first decimal is entered
if (event.key === `.` && decimalCount === 1) return
// Remove any commas from the string and convert to a float
// This will remove any non digit characters and second decimals
const numericVal = parseFloat(value.replace(/,/g, ''));
//NumberFormat options
const options = {
style: `decimal`,
maximumFractionDigits: 20,
};
// Assign the formatted number to the input box
this.value = new Intl.NumberFormat(`en-US`, options).format(numericVal);
})
// Append the input to the td
td.append(inpt);
// Append the td to the tr
tr.append(td);
// Append the tr to the table
table.append(tr);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-repsonsive">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
</tr>
</table>
</div>