Hidden input option

If you're handling your form submissions using good old-fashioned page requests (instead of modern JavaScript fetch requests) then you need to make sure your input values contain all of the information you need before the page request is made. Assuming you want to save your user's phone numbers in full standardised international format, which we strongly recommend, you will encounter a problem when a user enters their phone number in national format. For this situation, International Telephone Input provides the hiddenInput option, which listens for the form submit event, and injects a hidden input containing the full international number (and another containing the country code), which will then be submitted along with the rest of your form data.

You can see this in action using the demo below. Just select your country, enter a valid phone number in national format (no international dial code), and submit the form. You will see that the hidden input value "full_phone" (containing the full international number) is sent along with the other input value ("phone") in the URL parameters. In this example, the form submits to the current URL, so it just reloads the current page with those URL parameters. Then, for demonstration purposes, when we detect the "full_phone" parameter in the URL, we display it below so you can see it working.

Markup

<p id="message"></p>

<form id="form">
  <input id="phone" type="tel" name="phone" />
  <button class="button" type="submit">Submit</button>
</form>

Code

const input = document.querySelector("#phone");
const form = document.querySelector("#form");
const message = document.querySelector("#message");

const iti = window.intlTelInput(input, {
  initialCountry: "us",
  hiddenInput: () => ({ phone: "full_phone", country: "country_code" }),
  utilsScript: "/intl-tel-input/js/utils.js?1713364227752" // just for formatting/placeholders etc
});

form.onsubmit = () => {
  if (!iti.isValidNumber()) {
    message.innerHTML = "Invalid number. Please try again.";
    return false;
  }
};

const urlParams = new URLSearchParams(window.location.search);
const fullPhone = urlParams.get('full_phone')
if (fullPhone) {
  message.innerHTML = `Submitted hidden input value: ${fullPhone}`;
}