Как передать номер телефона из Intl-Tel-Input на вход на Ruby-on-rails? - PullRequest
Новая
       16

Как передать номер телефона из Intl-Tel-Input на вход на Ruby-on-rails?

0 голосов
/ 03 июля 2019

У меня есть simple_form с номером телефона. Я использую Intl-Tel-Input, чтобы получить полный номер телефона и подтвердить SMS в разных странах (twilio). В console.log мне удается отобразить весь номер. Когда я отправляю сообщение, я просто получаю номер телефона без индикатора страны (код набора)

Я прочитал документ, попытался получить его другим способом (.value, .data и т. Д.), Но невозможно сохранить весь номер телефона (например, +33612345678, я просто получил 61234567).

Вот мой код: 

    <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>

Я ожидаю получить +33612345678 для использования phone_number с twilio. Новичок на RoR и JS. Я что-то пропустил ? Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 07 июля 2019

Наконец-то исправьте это решение: 

<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>
...