How to get Country Code from (intl-tel-input) plugin after submitting the form?

问题

I've installed the plugin and Its displaying the countries correctly and working fine, but when I submit the form that has the input of type = "tel", the form does not submit the country code, I don't know how this works, but I did read all of instructions in https://github.com/jackocnr/intl-tel-input page, but I didn't understand how to get the full number + code country together so I can insert them into MySQL data base.

I'm so beginner, and just confused how to get this to work fine. Sorry if the question is not that hard, but I really don't know how this works.

The jQuery code I have:-

$("#telephone").intlTelInput({ 
    initialCountry: "sd",
    separateDialCode: true 
});

回答1:

Submit the form with this:

HTML:

<form action="post">
  <div class="select">
    <input type="hidden" id="phone2" name="phone"/>
    <input type="tel" id="phone" name="phone-full">
  </div>
</form>

JAVASCRIPT:

$("form").submit(function() {
    $("#phone2").val($("#phone").intlTelInput("getNumber"));
});

回答2:

<form method="post">
    <input type="hidden"  id="code" name ="code" value="1" >
    <input type="text" id="phone" name ="phone" value="" >
    <button type="submit" >Send Verification Text</button>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        $("#phone").intlTelInput({
            preferredCountries: ["us", "ca"],
            separateDialCode: true,
            initialCountry: ""
        }).on('countrychange', function (e, countryData) {
            $("#code").val(($("#phone").intlTelInput("getSelectedCountryData").dialCode));

        });


    });
</script>

回答3:

intlTelInput option:

hiddenInput

Add a hidden input with the given name. Alternatively, if your input name contains square brackets (e.g. name="phone_number[main]") then it will give the hidden input the same name, replacing the contents of the brackets with the given name (e.g. if you init the plugin with hiddenInput: "full", then in this case the hidden input would have name="phone_number[full]"). On submit, it will automatically populate the hidden input with the full international number (using getNumber). This is a quick way for people using non-Ajax forms to get the full international number, even when nationalMode is enabled. Avoid this option when using Ajax forms and instead just call getNumber to get the full international number to send in the request. Note: requires the input to be inside a form element, as this feature works by listening for the submit event on the closest form element. Also note that since this uses getNumber internally, firstly it requires the utilsScript option, and secondly it expects a valid number and so should only be used after validation.

var phone_number = window.intlTelInput(document.querySelector("#phone_number"), {
  separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});

$("form").submit(function() {
  var full_number = phone_number.getNumber(intlTelInputUtils.numberFormat.E164);
$("input[name='phone_number[full]'").val(full_number);
  alert(full_number)
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
<body>
  <form>
    <input type="tel" name="phone_number[main]" id="phone_number" />
    <button type="submit" name="save">Save</button>
  </form>

</body>

Php Code

You can get full number like

$phone_number = $_REQUEST['phone_number']['full'];

回答4:

// Add code in intlTelInput.js to use current location show code

$currentCountry = 'us';
    $.ajax({
        url: 'http://ip-api.com/json/',
        async: false,
        success:function(data){
            $currentCountry = data.countryCode.toLowerCase();
            // console.log(data.countryCode.toLowerCase());
        }
    })

    $selected = $('.country_code').attr('country_iso_code2') != undefined ? $('.country_code').attr('country_iso_code2') : $currentCountry;
    // console.log($selected);
    var pluginName = "intlTelInpu`enter code here`t", defaults = {
        preferredCountries: [ $selected ],
        // united states and united kingdom
        initialDialCode: true,`enter code here`
        americaMode: false,
        onlyCountries: []
    };

回答5:

Searching a bit in the link you posted I found a nice example doing what you're asking

Taking some inspiration from the example, here is the code

HTML

<form action="post">
  <div class="select">
    <input type="hidden" id="country" name="country"/>
    <input type="tel" id="phone" name="phone">
  </div>
</form>

var input = $('#phone');
var country = $('#country');
var iti = intlTelInput(input.get(0))

// listen to the telephone input for changes
input.on('countrychange', function(e) {
  // change the hidden input value to the selected country code
  country.val(iti.getSelectedCountryData().iso2);
});

回答6:

HTML

(ng2TelOutput)="getNumberCellNo1($event)"

Javascript

getNumberCellNo1(e:any)
  {
    this.cell_code1.setNumber(e) 
    this.cellnumber1=e
  }

The getNumber() will give you the country code and number as +919843133490. The setNumber will set the country flag and place the number inn input field.

Hope it helped. Any further queries can be asked.

来源：https://stackoverflow.com/questions/41910786/how-to-get-country-code-from-intl-tel-input-plugin-after-submitting-the-form

标签

php

jquery

mysql

forms