How to pass the phone number from Intl-Tel-Input to an input on Ruby-on-rails? - ruby-on-rails

Question

I have a simple_form with a phone number. I'm using Intl-Tel-Input to get the entire phone_number and confirm SMS in different countries (twilio). In console.log, I succeed to display the entire number. When I submit, I just get the phone_number without the country indicator (dial_code)
I read the doc, tried to get it by other way (.value, .data, etc...), but impossible to save the entire phone_number (for example, [phone], I just get 61234567).
Here's my code :
<div class="userphonenumber">
<%= f.input :phone_number, label: 'N° de téléphone', required: true, autofocus: true ,
input_html: { autocomplete: "intlNumber" }, wrapper_html: { id: 'userphonenumber' }%>
</div>
<script>
$("#user_phone_number").intlTelInput({
formatOnInit: true,
separateDialCode: true,
onlyCountries: ['fr', 'at', 'be', 'bg', 'cz', 'dk', 'de', 'ee', 'ie', 'el', 'es', 'hr', 'it', 'cy', 'lv', 'lt', 'lu', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro', 'si', 'sk', 'fi', 'se', 'uk'],
initialCountry: "fr"
});
const flag = document.querySelector(".flag-container")
flag.addEventListener("click", () => {
var intlNumber = $("#user_phone_number").intlTelInput("getNumber");
console.log("intlNumber", intlNumber)
var input = document.querySelector("#user_phone_number");
window.intlTelInput(input);
});
</script>
I'm expecting to get [phone] to use the phone_number with twilio. Beginner on RoR and JS. Did I miss something ?
Thanks for your help.

Answer 1

Finally fix with this solution :
<script>
$("#user_phone_number").intlTelInput({
formatOnInit: true,
separateDialCode: true,
onlyCountries: ['at', 'be', 'bg', 'cz', 'dk', 'de', 'ee', 'ie', 'el', 'es', 'fr', 'hr', 'it', 'cy', 'lv', 'lt', 'lu', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro', 'si', 'sk', 'fi', 'se', 'uk'],
initialCountry: "fr",
});
var phone = document.getElementById('user_phone_number')
phone.addEventListener('keyup', (event) => {
console.log(event)
});
$("form").submit(function() {
$('#user_phone_number').val($(phone).intlTelInput("getNumber"));
});
</script>

Answer 2

$(".form").submit( function(eventObj) {
$("<input />").attr("type", "hidden")
.attr("name", "ccode")
.attr("value", $(this).find(".selected-dial-code").text())
.appendTo(".form");
return true;
});