Error getting value from a jQuery text field


I'm trying to get the value of a field configured with the plugin intl-tel-input , in which I ask the user to enter their phone number. The problem is that, for some reason, when sending the data to the server, the field (named phone ) is empty:

comments: "Comentario"
contact: "Correo"
email:"[email protected]"
name: "Xab"
phone: ""
read: true
surname: "Montoto"
zip: 1111

The input is this:

<div><input type="text" class="form-control form-control-200" name="phone" ng-model="vm.form.phonepasar" id="phone_pasar" ng-maxlength=15 maxlength=15 ng-model-options="{ updateOn: 'blur' }"/>

The options I have tried to overcome the error are:

  • Create a hidden field and copy the value of the data. This, effectively, allows to pass the value to the server. However, by requiring the required parameter, I can not put it in type=hidden , nor display:none , nor visibility:hidden , since apparently it is necessary for the user to manually modify this field to be considered valid.

  • Use the JSValidate plugin to ignore the required parameter. Neither has worked.

  • What must be done so that when you call the function save() you can pass the value of the telephone field to the server?:

    function save() {
        vm.isSaving = true;
        var valorOculto = $("#phone").intlTelInput("getNumber", intlTelInputUtils.numberFormat.E164);
        ContactaServiceRest.contacto(vm.form, onSaveSuccess, onSaveError);
    asked by wickedchild 18.05.2017 в 16:22

    2 answers


    To be able to extract the number formatted using intlTelInput("getNumber") it is necessary to initialize the plugin with the option utilsScript

      utilsScript: ""
    // update the hidden input on submit
    $("form").submit(function(e) {
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
      <input id="phone" type="tel" name="phone">
      <input id="hidden" type="hidden" name="phone-full">
      <button type="submit">Submit</button>

    source: link

    answered by 18.05.2017 в 17:30

    Only correct the name of the input,

    <div><input type="text" class="form-control form-control-200" name="phone" ng-model="vm.form.phonepasar" id="phone" ng-maxlength=15 maxlength=15 ng-model-options="{ updateOn: 'blur' }"/>

    You can clearly see in JS that you're calling $("#phone")

    answered by 18.05.2017 в 19:21