update hidden input example to use new hiddenInput option

jackocnr · Jul 30, 2017 · 7e4e8f9 · 7e4e8f9
1 parent db9887c
commit 7e4e8f9
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 50 deletions.
diff --git a/examples/gen/country-sync.html b/examples/gen/country-sync.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Country sync</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
-      <link rel="stylesheet" href="../css/countrySync.css?1501227254404">
+      <link rel="stylesheet" href="../css/countrySync.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -91,7 +91,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/countrySync.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/countrySync.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/default-country-ip.html b/examples/gen/default-country-ip.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Lookup user's country</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -48,7 +48,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/defaultCountryIp.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/defaultCountryIp.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/hidden-input.html b/examples/gen/hidden-input.html
@@ -2,10 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example: Submitting the full international number when in nationalMode</title>
+    <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?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -22,38 +22,35 @@
 
   <body>
     <a href="/">Back</a>
-    <h1>Example: Submitting the full international number when in nationalMode</h1>
-    <p>If you're submitting the form using Ajax, simply use getNumber to get the number before sending it. If you're using the standard form POST method, you should use a separate hidden input which you update on submit to send the full international number. Try submitting a valid number below, and then check the 'phone-full' parameter in the URL.</p>
+    <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">&lt;form&gt;
   &lt;input id=&quot;phone&quot; type=&quot;tel&quot; name=&quot;phone&quot;&gt;
-  &lt;input id=&quot;hidden&quot; type=&quot;hidden&quot; name=&quot;phone-full&quot;&gt;
   &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</code></pre>
+&lt;/form&gt;
+</code></pre>
 
     <h2>Code</h2>
     <pre><code class="language-javascript">$(&quot;#phone&quot;).intlTelInput({
+  hiddenInput: &quot;full_phone&quot;,
   utilsScript: &quot;../../build/js/utils.js&quot; // just for formatting/placeholders etc
 });
-
-// update the hidden input on submit
-$(&quot;form&quot;).submit(function() {
-  $(&quot;#hidden&quot;).val($(&quot;#phone&quot;).intlTelInput(&quot;getNumber&quot;));
-});</code></pre>
+</code></pre>
 
     <h2>Result</h2>
     <div id="result">
       <form>
   <input id="phone" type="tel" name="phone">
-  <input id="hidden" type="hidden" name="phone-full">
   <button type="submit">Submit</button>
 </form>
+
     </div>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/hiddenInput.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/hiddenInput.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/is-valid-number.html b/examples/gen/is-valid-number.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Validation</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
-      <link rel="stylesheet" href="../css/isValidNumber.css?1501227254404">
+      <link rel="stylesheet" href="../css/isValidNumber.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -73,7 +73,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/isValidNumber.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/isValidNumber.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/modify-country-data.html b/examples/gen/modify-country-data.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Modify country data</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -45,7 +45,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/modifyCountryData.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/modifyCountryData.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/national-mode.html b/examples/gen/national-mode.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: National Mode</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -56,7 +56,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/nationalMode.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/nationalMode.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/gen/only-countries-europe.html b/examples/gen/only-countries-europe.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: European countries</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501227254404">
-    <link rel="stylesheet" href="../../build/css/demo.css?1501227254404">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1501407258255">
+    <link rel="stylesheet" href="../../build/css/demo.css?1501407258255">
 
 
     <!-- GOOGLE ANALYTICS -->
@@ -44,7 +44,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1501227254404"></script>
-    <script src="../js/onlyCountriesEurope.js?1501227254404"></script>
+    <script src="../../build/js/intlTelInput.js?1501407258255"></script>
+    <script src="../js/onlyCountriesEurope.js?1501407258255"></script>
   </body>
 </html>
diff --git a/examples/js/hiddenInput.js b/examples/js/hiddenInput.js
@@ -1,8 +1,4 @@
 $("#phone").intlTelInput({
+  hiddenInput: "full_phone",
   utilsScript: "../../build/js/utils.js" // just for formatting/placeholders etc
 });
-
-// update the hidden input on submit
-$("form").submit(function() {
-  $("#hidden").val($("#phone").intlTelInput("getNumber"));
-});
diff --git a/examples/partials/hiddenInput.html b/examples/partials/hiddenInput.html
@@ -1,5 +1,4 @@
 <form>
   <input id="phone" type="tel" name="phone">
-  <input id="hidden" type="hidden" name="phone-full">
   <button type="submit">Submit</button>
-</form>
+</form>
diff --git a/grunt/template.js b/grunt/template.js
@@ -126,8 +126,8 @@ module.exports = function(grunt) {
         data: function() {
           return {
             time: time,
-            title: "Submitting the full international number when in nationalMode",
-            desc: "If you're submitting the form using Ajax, simply use getNumber to get the number before sending it. If you're using the standard form POST method, you should use a separate hidden input which you update on submit to send the full international number. Try submitting a valid number below, and then check the 'phone-full' parameter in the URL.",
+            title: "Submitting the full international number using a hidden input",
+            desc: "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.",
             stylesheet: '',
             markup: grunt.file.read('examples/partials/hiddenInput.html'),
             code: grunt.file.read('examples/js/hiddenInput.js'),