intl-tel-input hidden values not getting submitted through form

Question

I have implemented intl-tel-input like this

    var ppvar;

    function primaryPhoneDisplay(assignedName){
      let countryPhoneNumer = document.querySelector(`input[name="${assignedName}"]`);
      ppvar = window.intlTelInput(countryPhoneNumer, {
          separateDialCode: true,
          initialCountry: "IN",
          preferredCountries: ["IN"],
          nationalMode: false,
          hiddenInput: "primary_phone_test",
          formatOnDisplay: false,
          utilsScript:'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js'
      });
    }

    primaryPhoneDisplay("primaryPhone");

The HTML is like this

<form action="/formsubmit" method="POST" onsubmit="return formSubmit()">

 <input type="text" name="primaryPhone" class="form-control"   oninput="someFunction(this)" placeholder="Phone Number" />

 <input type="submit" value="Submit" />
</form>

On inspecting the hidden fields appear in the source but on submission of the form, the fields are missing in the req.body, All other fields are there except this.

Is there anything wrong with the code?

I was asking you this because it would be possible that your formSubmit() method would be the one causing problems (sending fields by AJAX and forgetting to add the hidden one or something similar). Have you tried to send the form without any javascript validation and check if POST data has the hidden field? When you inspect the source code, is the hidden field inside the
tags? — Héctor Paúl Cervera-García, Feb 04 '19 at 12:01
Hey, I did try with no JS validations and it works like it's supposed to. Thanks. — Nithin, Feb 04 '19 at 17:09

intl-tel-input hidden values not getting submitted through form

0 Answers0