I have a contact number input field and I was able to prepend a country code dropdown to the input field.
Now when user selects the country code, the number format will change according to the selected country code.
My question now is how do you loop all the country code out from the library and put it into the dropdown? I tried using some functions like "getSupportedRegions();" but it is saying undefined. I already have the script-src included in the head, am I doing it wrong?
<!DOCTYPE html>
<html>
<head>
<script src=".9.1/jquery.min.js"></script>
<link rel="stylesheet" href=".5.2/css/bootstrap.min.css">
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".5.2/js/bootstrap.min.js"></script>
<script src="@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
<option>SG</option>
<option>MY</option>
<option>US</option>
<option>TH</option>
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
$(".phone-format").keyup(function () {
var val_old = $(this).val();
var newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val('').val(newString);
});
</script>
</body>
</html>I have a contact number input field and I was able to prepend a country code dropdown to the input field.
Now when user selects the country code, the number format will change according to the selected country code.
My question now is how do you loop all the country code out from the library and put it into the dropdown? I tried using some functions like "getSupportedRegions();" but it is saying undefined. I already have the script-src included in the head, am I doing it wrong?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg./libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
<option>SG</option>
<option>MY</option>
<option>US</option>
<option>TH</option>
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
$(".phone-format").keyup(function () {
var val_old = $(this).val();
var newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val('').val(newString);
});
</script>
</body>
</html>- This is just a testing one actually it doesn't work. Sorry I did not mention it. I should go ahead and erase that. – HNG Commented Dec 1, 2020 at 8:22
- Thanks I didn't know how to covert to stack overflow snippet ! :D – HNG Commented Dec 1, 2020 at 8:23
- Found the function for you, I will delete my ments above since they're no longer relevant. Feel free to delete your ments too just to clean up the Q/A page, and then I will delete this one. :-) – Michael Geary Commented Dec 1, 2020 at 8:35
1 Answer
Reset to default 5The function you're looking for is libphonenumber.getCountries() (documentation).
I added a call to this function at the beginning of your script with the code to generate the country option list:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg./libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
const countries = libphonenumber.getCountries();
const optionList = countries.map( country => `<option>${country}</option>` );
$(".select-country").html( optionList );
$(".phone-format").keyup(function () {
const val_old = $(this).val();
const newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val(newString);
});
</script>
</body>
</html>I also changed var to const. Always use const when you can, or let if you need to mutate (reassign) a variable. And a minor point, in this line:
$(this).focus().val('').val(newString);
You don't need to do the val(''), just set the new value.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744989506a4604814.html
评论列表（0条）