I have the HTML below which is using the library intl-tel-input. When a user inputs a phone number in the form I wanted to output in the output container the following things:
- the word "Valid:" and then "true" on the right of the word valid if the phone number was inserted in the correct format.
- the word "Raw local:" and on the right the raw local number from the form
- The word "Local:" and on the right the local number from the form
- The word "E164:" etc.
- The word "International" etc.
- The word "Country code:", etc.
- The word "Country:" etc. For example if in the form it's china it will appear CN
This is what I tried but currently, it doesn't output anything. know this should be easy but am kinda new to javascript.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<div class="ml-auto">
<button class="btn btn-secondary" id="theme-button">
<img src="light-theme-icon.svg" alt="Light theme" id="light-icon">
<img src="dark-theme-icon.svg" alt="Dark theme" id="dark-icon">
</button>
<button class="btn btn-secondary" id="language-button">
<img src="language-icon.svg" alt="Select language">
</button>
</div>
</nav>
<div class="container">
<form id="login" onsubmit="process(event)">
<p>Enter your phone number:</p>
<input id="phone" type="tel" name="phone" />
<input type="submit" class="btn" value="Verify" />
</form>
<div class="alert alert-info" style="display: none;"></div>
</div>
<!-- Output container -->
<div id="output-container"></div>
</body>
<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
<script>
function process(event) {
event.preventDefault();
let phoneNumber = document.querySelector("#phone").value;
let iti = window.intlTelInput(document.querySelector("#phone"));
let isValid = iti.isValidNumber();
let rawLocal = iti.getNumber(intlTelInputUtils.numberFormat.E164);
let local = iti.getNumber(intlTelInputUtils.numberFormat.NATIONAL);
let e164 = iti.getNumber(intlTelInputUtils.numberFormat.E164);
let international = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
let countryCode = iti.getNumber(intlTelInputUtils.numberFormat.E164).slice(0, 2);
let country = iti.getSelectedCountryData().iso2;
// Output the results in the output container
let outputContainer = document.querySelector("#output-container");
outputContainer.innerHTML = `
Valid: ${isValid}<br>
Raw Local: ${rawLocal}<br>
Local: ${local}<br>
E164: ${e164}<br>
International: ${international}<br>
Country Code: ${countryCode}<br>
Country: ${country}
`;
</script>
</html>
I tried the html written in the message above