Hi there,
(Thanks you for this awesome module)
My goal is to store an international format number.
As mentioned in the documentation here : https://github.com/jackocnr/intl-tel-input
I can display and also get a submitted value with an international format using the option "separateDialCode".
separateDialCode Type: Boolean Default: false Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated.
However, on submit, I only get a number with national format.
Here my code included into CSS / JavaScript configuration of webform > Configuration > Libraries.
Drupal.webform = Drupal.webform || {};
Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
Drupal.webform.intlTelInput.options = {
preferredCountries: ['fr'],
separateDialCode: true,
autoPlaceholder: "aggressive",
formatOnDisplay: true,
};The display is fine, all the options are taken in consideration.
Expecting When I submit the form I get a phone number with an international format.
I did try the hiddeninput but I do not inderstand the logic to store the full number in an hidden input (that i cannot get into webform hidden intput), if it's already managed by the librairie :(. Same with forcing nationalMode:False.
After submitting the form, the only value I get is "782828282", and not "+33782828282" (see the picture below). It seems more related to intl-tel-input as it seems you do not get what you see. Can it be solved by the integration using getNumber() instead?
Using: jQuery: International Telephone Input : 15.1.0
Cheers,
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | error message.png | 25.92 KB | ious |
| #13 | webform field tel settings.png | 64.88 KB | ious |
| #8 | webform.webform.issue_3094158.yml | 4.47 KB | jrockowitz |
| #6 | Screenshot 2019-11-14 at 11.08.03.png | 7.52 KB | ious |
| #5 | webform.webform.issue_3094158.yml | 4.7 KB | jrockowitz |
Comments
Comment #2
ious commentedComment #3
ious commentedComment #4
jrockowitz commentedThe attached webform replicates this issue which I feel needs to be resolved using a custom module that extends the tel input and adding the hidden input.
Comment #5
jrockowitz commentedHere is the webform.
Comment #6
ious commentedThanks, for now I am going to rollback to the following solution:
When we select the flag it adds the country code inside the output (So so but works with agressive placeholder)
Comment #7
weseze commentedThis was marked as duplicate with a reference to a patch from #3094014.
I fail to see how that issue might resolve this issue...
Imo this is still an issue, and a fix still needs to be made. The maintainer of intl-tel-input strongly recommends storing the telephone number in database based on the getNumber() return value from the plugin and not the input value... So this needs to be addressed.
https://github.com/jackocnr/intl-tel-input#recommended-usage
Comment #8
jrockowitz commentedThe attached webform shows the current format of the default and international phone number
What change are you proposing? Always use +12123334444?
Keep in mind changing how phone numbers are stored will cause regressions for people expecting the current format.
Comment #9
weseze commentedThe issue actually only becomes really clear when you set the "separateDialCode: true" option. Not something you can do in the webform element, but you can do it by adding JS to to webforms libraries config. When you set that option to true, you can select the country (dial code), but webform never stores it.
I propose to indeed store the telephone number as international format. (by using the intl-tel-input recommended getNumber() function) To prevent regressions this could be an option in the element itself?
Not sure how this could be implemented though, since you would need to get the value through javascript before the form submit?
Comment #10
jrockowitz commentedMaybe, we could support the separateDialCode by merging the phone number during validation.
So for an international number, we add an element property (i.e. #international_format) that always stores phone number using +12123334444.
Listening to form submit events is tricky when it comes to ajax submissions.
What is our goal? Support separateDialCode or change how we store phone numbers?
Comment #11
jrockowitz commentedConsidering the complexity, I don't think it has to be addressed by the weform module. I think this should be fixed via a contrib module or custom code.
Comment #12
ious commentedThe goal here is to support separateDialCode.
Currently, the front display an international number but a national number is stored.
It' really heavy for the end user to input a full international number (they are not used to). This library helps efficiently on this aspect. However, there is no solution on the webform side to gather the international format.
I agree with you a plugin would help a better integration between https://intl-tel-input.com/ and webform.
For information about my settings :
Cheers,
Comment #13
ious commented