I have two phone number inputs on one page:
<input type="tel" class="form-control maskedPhone" id="telephonenumber_0" name="telephonenumber_0" placeholder=" " value="" pattern="[0-9\s\+]{16}" required="">
<input type="tel" class="form-control maskedPhone" id="telephonenumber_1" name="telephonenumber_1" placeholder=" " value="" pattern="[0-9\s\+]{16}" required="">
The mask should change based on the country selects that are closest to them.
function maskNumberFields() {
console.log('maskNumberFields')
var numCodes = document.querySelectorAll("[id^='countrycode_']").length
for (let i = 0; i <= numCodes; i++) {
var countrycode = $('#countrycode_'+i).find(':selected').val()
if (countrycode != '') {
switch (countrycode) {
case 'us':
phoneMask = IMask(
document.getElementById('telephonenumber_'+i), {
mask: '+{1} (000) 000 0000',
lazy: true
}
)
break;
case 'ca':
phoneMask = IMask(
document.getElementById('telephonenumber_'+i), {
mask: '+{63} 000 000 0000',
lazy: true
}
)
break;
}
}
}
}
This works fine on all inputs, but updating the phone masks individually is a mystery.
$('#addressbook').on('change', '[id^=countrycode_]', function() {
var sel = $(this).val()
maskNumberFieldsUpdate(sel, $(this).attr('id'))
console.log('this: '+$(this).attr('id'))
})
function maskNumberFieldsUpdate(countrycode, elem) {
console.log('maskNumberFields update')
switch (countrycode) {
case 'us':
phoneMask.updateOptions({
mask: '+{1} (000) 000 0000',
})
break;
case 'aus':
phoneMask.updateOptions({
mask: '+{63} 000 000 0000',
})
break;
}
}
The mask update only works on the highest i, so my guess is that the the update only applies to the latest phoneMask, but in that case, how would I apply the mask to individual inputs while also allowing them to be updated individually (by element)?
