We Keep Coding

How to run form input phone mask on load?

I am masking a phone input via typing like this:
<script type="text/javascript">
document.getElementById("phoneinput_<%= dom_id(field) %>").addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
</script>
When I am editing the form and the phone field values are pulled from the DB I also need to format them on load outside of the input event listener. How do you do this?

Do a .dispatchEvent(new Event("input")) to trigger an input:
let elem = document.getElementById("phoneinput");
elem.addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
elem.dispatchEvent(new Event("input"));
<input id="phoneinput" value="1234567890" />

Autoformat input field

I have a javascript, which I supposed to format phone number to +1 (222) 555 22-22, but for some reason it stops to work just on first number.. Can you elaborate what's I'm doing wrong?
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[3] ? x[1] : '+' + x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '');
});
<input type="text" id="phone" placeholder="+1 (222) 444-5555"/>

Thousand comma separator issue only last 3 digit is validating

I try to convert the number in text box as comma separated values while typing but only the last values are taken.
<script type="text/javascript">
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
This is the HTML file:
<asp:TextBox ID="txtbudamt" runat="server" CssClass="text_box" Height="22px" Width="140px" onkeyup="this.value=addCommas(this.value);" onkeydown="return (event.keyCode!=13);" AutoComplete="Off" TabIndex="7"></asp:TextBox>
When I enter numbers till 9999 it gives correct output like 9,999
When I go for 10000 it gives 1,0,000

You can simply use toLocaleString for this. It is also supported on most browsers.
function addCommas(nStr) {
return parseFloat(nStr).toLocaleString('en-GB');
}

Regex phone masking

I'm trying to write phone input masking function. Here it is:
let input = document.querySelector('input');
input.addEventListener('input', ()=>{
let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
event.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
})
<input />
It works, but with one problem. When I press the backspace key, I erase the phone number to something like +1 (111). Such an entry is valid for the regular expression, and the string is replaced by itself

Per #ggorlen's suggestion in the comments, here is one way to do this:
let input = document.querySelector('input');
input.addEventListener('keydown', (event)=>{
if (event.key === "Backspace" || event.key === "Delete") return;
let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
event.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
})
<input maxlength=18 />

Javascript document.getElementByID with condition

I'm reading from a text file some numbers. Sometimes there's a number 0 and the line below outputs 0, but I don't want to output if the number is "0". Is there a way to change the line below to NOT output/print when the number is "0"? Thanks
document.getElementById('inputText').innerHTML= "(" + parseFloat(output1*2).toFixed(3) + "," + parseFloat(output2*2).toFixed(3) + ")";

You can make a function that checks each value and generates a result based on that, like this:
var getResult = function (num1, num2) {
var result1 = num1 ? (parseFloat(num1) * 2).toFixed(3) : "";
result1 = isNaN(result1) ? "" : result1;
var result2 = num2 ? (parseFloat(num2) * 2).toFixed(3) : "";
result2 = isNaN(result2) ? "" : result2;
var comma = result1 && result2 ? ", " : "";
return `(${result1}${comma}${result2})`;
};
document.getElementById('result').innerHTML += `5, 0 = ${getResult("5")}<br/>`;
document.getElementById('result').innerHTML += `0, 4 = ${getResult("0", "4")}<br/>`;
document.getElementById('result').innerHTML += `3, 2 = ${getResult("3", "2")}<br/>`;
document.getElementById('result').innerHTML += `3, 2 = ${getResult("three", "15.5")}<br/>`;
<div id="result"></div>
Edit: Removed possible NaN-results.

You can replace 0 with nothing using the or operator:
parseFloat(output1*2) || ""
or using a ternary:
output1? parseFloat(output1*2).toFixed(3) : ""

document.getElementById('inputText').innerHTML= "(" + ((parseFloat(output1*2).toFixed(3) + ",") ? parseFloat(1*2).toFixed(3):"") + ((parseFloat(output2*2).toFixed(3)) ? parseFloat(1*2).toFixed(3):"") + ")";

Use if statement to check your number:
Html:
<p id="inputText">
0
</p>
Js:
var output = document.getElementById('inputText').innerHTML;
output = parseFloat(output);
if(output != '0'){
inputText.innerHTML= "(" + (output *2)
.toFixed(3) + "," + (output*2).toFixed(3) + ")";
}
https://jsfiddle.net/b5st3h2m/2/