Multiple hiddenInput fields intl-tel-input package

Question

I'm having an issue with trying to add multiple hiddenInput fields to intl-tel-input

Package github: https://github.com/jackocnr/intl-tel-input

Code I've tried:

<script>
  var phone_number = window.intlTelInput(document.querySelector("#phone_number"), {
  preferredCountries:["al"],
  hiddenInput: "['iso','code']", // Output: "['iso','code']" => "+355123123"
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});
$("form").submit(function() {
    var isoCode = phone_number.getSelectedCountryData().iso2;
    var dialCode = phone_number.getSelectedCountryData().dialCode;
    var iso = $("input[name='phone[iso]'").val(isoCode);
    var dial = $("input[name='phone[dial]'").val(dialCode);
});

</script>

Another code I tried for the hiddenInput:

hiddenInput: "dialCode",
hiddenInput: "isoCode",

The output was it read the isoCode only totally ignoring the dialCode.

I'm running out of thoughts on how to get this fixed.

score 0 · Answer 1 · answered Nov 13 '20 at 16:24

Found the solution, the package by default only allows saving of one field in the hiddenInput as described by the package maintainer.

I had to go back to the fundamentals of Javascript and simply append an input prior to submitting it.

This line saved my day:

$("<input />").attr("type", "hidden")
          .attr("name", "code")
          .attr("value", dialCode)
          .appendTo("#form");
      return true;

Multiple hiddenInput fields intl-tel-input package

1 Answers1