I have make one demo program that can related to my original project.
The demo scenario: first, I enter a number in tel-input with input box as per given below image:
Once a phone number is added, it should be stored in the local storage. When the "Validate" button is clicked, the entered number should also be stored in the local storage. After refreshing the page, the number should be retrieved from the local storage and populated in the phone number field, along with the corresponding flag. If the number is changed, the updated data should be saved in the local storage, and it should show the updated stored number with corresponding flag.
<!DOCTYPE html>
<html>
<head>
<title>Mobile Number Validation</title>
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<input type="tel" id="phone-input" name="phone-input">
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.js"></script> -->
<script>
const MphoneInputField = document.querySelector("#phone-input");
const MphoneInput = window.intlTelInput(MphoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
MphoneInput.setCountry("ae");
var Flag;
MphoneInputField.addEventListener("countrychange", function () {
var countryCode = MphoneInput.getSelectedCountryData().iso2;
MphoneInput.setCountry(countryCode);
alert(countryCode);
Flag=countryCode;
});
//MphoneInput.setCountry("ae");
function validatePhoneNumber() {
alert(Flag);
const MphoneInputField = document.querySelector("#phone-input");
const MphoneInput = window.intlTelInput(MphoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
initialCountry: Flag
});
var data1 = localStorage.getItem("SaveNum");
MphoneInput.setNumber(data1);
var phoneNumber = MphoneInput.getNumber();
var isValid = MphoneInput.isValidNumber();
console.log(phoneNumber);
if (isValid) {
// Valid mobile number
console.log("Valid phone number:", phoneNumber);
localStorage.setItem("SaveNum", phoneNumber);
} else {
// Invalid mobile number
console.log("Invalid phone number:", phoneNumber);
}
if (localStorage.getItem("SaveNum") != null) {
MphoneInput.setNumber(localStorage.getItem("SaveNum"));
$("#phone-input").val(localStorage.getItem("SaveNum"));
}
}
$(document).ready(function () {
const MphoneInputField = document.querySelector("#phone-input");
const MphoneInput = window.intlTelInput(MphoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
initialCountry: 'ae'
});
var data = localStorage.getItem("SaveNum");
if (data != null) {
MphoneInput.setNumber(data);
$("#phone-input").val(data);
}
});
</script>
<button onclick="validatePhoneNumber()">Validate</button>
<!-- <button onclick="GetValue()">GetValue</button> -->
</body>
</html>
In my attempted implementation, the code number is saved the first time, and is showing perfectly, but when refreshing, it's not populating with its corresponding flag and number.