File: /var/www/quadcode-jobs/node_modules/intl-tel-input/examples/gen/hidden-input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example: Submitting the full international number using a hidden input</title>
<link rel="stylesheet" href="../css/prism.css">
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
<link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N472J4QKC4');
</script>
</head>
<body>
<a href="/">Back</a>
<h1>Example: Submitting the full international number using a hidden input</h1>
<p>If you're submitting the form using Ajax, simply use getNumber to get the full international number before sending it. If you're using the standard form POST method, you can use the hiddenInput option to automatically create a hidden input that gets populated with the full international number on submit. Try submitting a valid number below, and then check the 'full_phone' parameter in the URL.</p>
<h2>Markup</h2>
<pre><code class="language-markup"><form>
<input id="phone" type="tel" name="phone">
<button type="submit">Submit</button>
</form>
</code></pre>
<h2>Code</h2>
<pre><code class="language-javascript">var input = document.querySelector("#phone");
window.intlTelInput(input, {
hiddenInput: "full_phone",
utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
});
</code></pre>
<h2>Result</h2>
<div id="result">
<form>
<input id="phone" type="tel" name="phone">
<button type="submit">Submit</button>
</form>
</div>
<script src="../js/prism.js"></script>
<script src="../../build/js/intlTelInput.js?1638200991544"></script>
<script src="./js/hiddenInput.js?1638200991544"></script>
</body>
</html>