Блог

У меня есть форма регистрации (PHP и MySQL), в которой посетители могут указать свое имя, адрес электронной почты и номер мобильного телефона. После отправки он отправляется в базу данных.

Теперь я хочу добавить код страны с выпадающим списком перед номером мобильного телефона, чтобы посетители могли выбрать нужную страну и ввести свой номер мобильного телефона.

Для этого я использовал «ввод intl-tel» с Github. Все работает нормально. но когда я пытаюсь получить значение номера мобильного телефона с кодом страны, используя метод PHP POST или GET, это не работает. Но это работает, когда я пытаюсь получить значение из JS.

Ниже приведен код получения номера мобильного телефона с кодом страны от JS, и он работает совершенно нормально.

 <div class="container">
      <form id="login" onsubmit="process(event)">
        <p>Enter your phone number:</p>
        <input id="phone" type="tel" name="phone" />
        <input type="submit" class="btn" value="Verify" />
      </form>
      <div class="alert alert-info" style="display: none"></div>
      <div class="alert alert-error" style="display: none"></div>
</div>

<script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
      utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");
    const error = document.querySelector(".alert-error");

    function process(event) {
      event.preventDefault();

      const phoneNumber = phoneInput.getNumber();

      info.style.display = "none";
      error.style.display = "none";

      if (phoneInput.isValidNumber()) {
        info.style.display = "";
        info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
      } else {
        error.style.display = "";
        error.innerHTML = `Invalid phone number.`;
      }
    }
  </script>
 

Я знаю, что могу получить данные с помощью JS и добавить их в базу данных. Но есть ли какой-либо способ, чтобы я мог получить значение номера мобильного телефона с кодом страны, используя метод POST?

Заранее спасибо.

Основываясь на вашем ответе на мой предыдущий комментарий, проблема в том, что вы использовали Javascript для проверки и правильного форматирования числа, и теперь вам нужно передать отформатированное значение обратно в PHP

Вы можете сделать это, взяв phoneNumber результат, поместив его обратно во входные данные, а затем отправив форму.

Вот код

 <div class="container">
      <form id="login" onsubmit="return process(event)">
        <p>Enter your phone number:</p>
        <input id="phone" type="tel" name="phone" />
        <input type="submit" class="btn" value="Verify" />
      </form>
      <div class="alert alert-info" style="display: none"></div>
      <div class="alert alert-error" style="display: none"></div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
      utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");
    const error = document.querySelector(".alert-error");

    function process(event) {

      const phoneNumber = phoneInput.getNumber();

      info.style.display = "none";
      error.style.display = "none";

      if (phoneInput.isValidNumber()) {
        info.style.display = "";
        document.getElementById("phone").value=phoneNumber
        return true
        // info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
      } else {
        error.style.display = "";
        error.innerHTML = `Invalid phone number.`;
        return false;
      }
    }
  </script>
 

Изменения заключаются в:

• onsubmit событие формы теперь проверяет возвращаемое значение. Если это ложь, не будет отправляться, если это правда, будет продолжать отправляться
• теперь process(event) функция возвращает значение true, если номер телефона подтвержден, или значение false, если это не так
• если process(event) возвращено значение true, он также редактирует input номер телефона, содержащий правильно отформатированное значение

Конечно, теперь вы можете переключить форму на ПУБЛИКАЦИЮ вместо получения, изменить действие и т. Д…