I using country code plugin name intlTelInput.js (this I demo page) in the page I want to empty the phone (input filed) when country select change
<div class="demo">
<h3>Demo</h3>
<div class="iti iti--allow-dropdown">
<div class="iti__flag-container">
<div class="iti__selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0"
title="Algeria (‫الجزائر‬‎): +213">
<div class="iti__flag iti__dz"></div>
<div class="iti__arrow"></div>
</div>
</div><input type="tel" id="phone" class="form-control" autocomplete="off" data-intl-tel-input-id="0"
placeholder="0551 23 45 67">
</div>
</div>
I tried:
$(".iti__selected-flag").bind('change', function(event) {
$('#phone').val('')
});
And below code will make phone filed value empty (when click , but I want it empty when after select another country item done)
$(function(){
$("#phone").bind('change', function(event) {
$('#phone').val('')
});
})
But it not working
There is a native way to bind country change intl-tel-input:
var input = $("#phone");
input.intlTelInput();
input.on("countrychange", function() {
input.val('')
});