Error getting value from a jQuery text field

Question

Error getting value from a jQuery text field

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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);
    $("#phone").val(valorOculto);
    ContactaServiceRest.contacto(vm.form, onSaveSuccess, onSaveError);
}

javascript jquery formularios

asked by wickedchild 18.05.2017 в 16:22

source

2 answers

Check if several values are in a python list PHP does not receive parameters after submit

score 2 · Answer 1

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

$("#phone").intlTelInput({
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.13/js/utils.js"
});

// update the hidden input on submit
$("form").submit(function(e) {
  e.preventDefault();
  
  $("#hidden").val($("#phone").intlTelInput("getNumber"));
  
  console.log($("#hidden").val())
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.13/css/intlTelInput.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.13/js/intlTelInput.min.js"></script>

<form>
  <input id="phone" type="tel" name="phone">
  <input id="hidden" type="hidden" name="phone-full">
  <button type="submit">Submit</button>
</form>

source: link

score 0 · Answer 2

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")