Question: Code Input box to enter a phone number or a code Submit button Radio buttons to indicate what to enter US Phone number (xxx) xxx-xxxx
Code
Input box to enter a phone number or a code
Submit button
Radio buttons to indicate what to enter
US Phone number (xxx) xxx-xxxx
FR Phone number xx.xx.xx.xx
US SS number xxx-xx-xxxx
Verify it is correct on Submit
Extra credit:
Use keyboard events to format the input as the number is typed
Allow user to hit
I need help restricting numbers only, I don't want the user to be able to put in letters or other symbols and the max length of digits depending on the choice they pick
here is my code:
Enter your information?
const choices = document.querySelectorAll("#choices input");
for(let i=0; i choices[i].addEventListener("click", isChecked); } function isChecked(event) { const f = document.querySelector("#inp-label"); const n = document.querySelector("#forms"); const t = event.target; switch(t.value) { case "US": f.innerHTML = "US Phone Number"; n.placeholder = "(XXX) XXX-XXXX"; n.removeEventListener("keydown",fmtSS); break; case "FR": f.innerHTML = "French Phone Number"; n.placeholder = "XX.XX.XX.XX.XX"; n.removeEventListener("keydown",fmtSS); break; case "SSN": f.innerHTML = "US Social Security Number"; n.placeholder = "XXX-XX-XXXX"; n.removeEventListener("keydown",fmtSS); break; } } function formatNums() { const f = document.querySelector("#format"); const n = document.querySelector("#forms"); const rbts = document.querySelectorAll("#choices input"); for (let i=0; i if (rbts[i].checked) { let v = n.value; switch(rbts[i].value) { case "US": f.innerHTML = "US tel: " + `(${v.slice(0,3)}) ${v.slice(3,6)}-${v.slice(6,10)}`; break; case "FR": f.innerHTML = "FR tel: " + `${v.slice(0,2)}.${v.slice(2,4)}.${v.slice(4,6)}.${v.slice(6,8)}.${v.slice(8,10)}`; break; case "SSN": f.innerHTML = "US SS: " + `${v.slice(0,3)}-${v.slice(3,5)}-${v.slice(5,9)}`; break; } break; } } } function fmtSS(event) { if (event.key == "Enter" || event.key == "Backspace" || event.key == "Delete"){ return; } event.preventDefault(); let t = event.target; if(t.value.length > 10) { return; } t.value += event.key; if (t.value.length == 3 || t.value.length == 6) { t.value += "-"; } }
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
