jackocnr
commented
5 years ago If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look.
Closed brentrug closed 5 years ago
jackocnr
commented
5 years ago If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look.
brentrug
commented
5 years ago Hey Jack, it was not to easy and its very basic ;) But here we go: https://codepen.io/brentrug/pen/xmQyxx Thanks a lot!
jackocnr
commented
5 years ago I just had a little play and it worked for me if I moved the intlTelInput initialisation to after the steps initialisation.
brentrug
commented
5 years ago Haha... Seriously? Thats too easy ;) But yeah it works! Thanks a lot!
ateequrrahman97
commented
2 years ago @jackocnr still not working with multi-steps (jQuery steps). I try to initialize after the steps initialization but it does not initialize. Also not working with the jquery validator. Only first country shows. Other functionality did not work.
dustapplications
commented
1 year ago I've fixed my issue by updating the hidden input in jquerySteps onFinished event:
onFinished: function (event, currentIndex){
$(".phone").each(function() {
var input = $(this).data('input'); // Name of hidden element
var iti = intlTelInput(this);
$("[name='" + input + "']").val(iti.getNumber());
});
}Here are my complete code:
HTML:
<div class="wizard pb-5">
<h3>@lang('Personal Details')</h3>
<section><div class="col-4">
<label for="mobile_number">@lang('Mobile Number') <span class="text-danger" title="@lang('This field is required')">*</span></label><br/>
<input class="form-control phone" id="mobile_number" data-input="mobile_number" type="text" value="{{ old('mobile_number', $applicationVM->mobile_number ?? $userVM->mobile_number) }}" required/>
<br/><label id="mobile_number-error" class="error hide" for="mobile_number">@lang('This field is required').</label>
</div>
</section>
</div>
JS
wizard.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "fade",
onInit: function () {
$(".phone").each(function() {
var initCountry = $(this).val() == "" ? 'mt' : 'auto';
var input = $(this).data('input'); // Name of hidden element
intlTelInput(this, {
separateDialCode: true,
hiddenInput: input,
initialCountry: initCountry,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js",
});
});
}, onFinished: function (event, currentIndex){
$(".phone").each(function() {
var input = $(this).data('input'); // Name of hidden element
var iti = intlTelInput(this);
$("[name='" + input + "']").val(iti.getNumber());
});
}
IMPORTANT: please read the New Issue Checklist before creating a new issue: https://github.com/jackocnr/intl-tel-input/wiki/New-Issue-Checklist
Steps to reproduce
Expected behaviour
Dropdown of Flags should work Validation should work Auto. detection of the country, while typing
Actual behaviour
Click on flag and nothing happends Validation does not work No detection of the country, while typing
Initialisation options
var iti = intlTelInput(document.querySelector("#intlTelInput"), { initialCountry: "ch" });
Here is the problem as printscreen: The dropwdown does not work. And also auto. detection of the country does not work, while typing
I also implemented this in the "normal" code (outside of steps) and there it works
Here is the code from steps.js:
`
Please complete your profile:
THanks for your help! I really love your plugin and hope we find a solution!