提交表单后如何从（intl-tel-input）插件获取国家代码？答案

【问题标题】：How to get Country Code from (intl-tel-input) plugin after submitting the form?提交表单后如何从（intl-tel-input）插件获取国家代码？
【发布时间】：2017-06-14 03:03:36
【问题描述】：

我已经安装了插件，它可以正确显示国家并且工作正常，但是当我提交输入类型为“tel”的表单时，表单没有提交国家代码，我不知道这是如何工作的，但我确实阅读了https://github.com/jackocnr/intl-tel-input 页面中的所有说明，但我不明白如何将完整的数字+代码国家放在一起，以便将它们插入 MySQL 数据库。

我是初学者，只是对如何让它正常工作感到困惑。对不起，如果问题不是那么难，但我真的不知道这是怎么回事。

我拥有的 jQuery 代码：-

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

【问题讨论】：

熟悉浏览器的 javascript 调试器（通常为 F12）。然后阅读github上的文档并玩一下
当你得到号码时，把它放在你的表单中的一个字段中，如果你喜欢，也可以是一个隐藏的。然后它会在您提交时发送到脚本
刚刚去看了 github 演示，如果为您生成的 HTML 是相同的，那么可能像 $(".country[class*='active']").attr("data-dial-code") 这样的东西应该会为您提供所选国家的拨号代码。然后，您必须使用 submit 手动传递该变量。或者在字符串前面附加这里获得的值到要发送到 PHP 的电话号码。
好吧，老实说，这只是一个快速修复，可能不是很优雅或理想。我不知道你的表单是如何提交的，所以不能说太多。但是，它的作用是：只要将焦点从字段中移开，它就会在电话号码值之前附加国家代码：$("#telephone").on("blur", function(){ $(this).val("+" + $(".country[class*='active']").attr("data-dial-code") + $(this).val()); });。如果有人再次返回此字段然后离开（无论是否编辑），那么它将再次导致附加国家代码。
好吧，我想没关系，我通过添加条件解决了值被再次追加的问题：if($(this).val() == '') { // code }

标签： php jquery mysql forms

【解决方案1】：

HTML 代码 使用这个 html 代码

<input type="text" name="ccode" id="ccode">
<input type="tel" id="phone" name="phone" >

JAVA 脚本代码

 //Country code

var titilec=title.split(":");
document.getElementById('ccode').value=titilec[1];

在你的 intlTelInput.js 文件中添加上面的 js 代码在下面的代码之后

//更新所选国家的title属性

var title = countryCode ? "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode) : "Unknown";
  this.selectedFlag.setAttribute("title", title);

【讨论】：

【解决方案2】：

intlTelInput 选项：

隐藏输入

添加具有给定名称的隐藏输入。或者，如果您的输入名称包含方括号（例如 name="phone_number[main]"），那么它将为隐藏的输入提供相同的名称，用给定名称替换括号的内容（例如，如果您使用 hiddenInput 初始化插件: "full"，那么在这种情况下隐藏的输入将具有 name="phone_number[full]")。提交时，它会自动使用完整的国际号码填充隐藏的输入（使用 getNumber）。对于使用非 Ajax 表单的人来说，这是一种快速获取完整国际号码的方法，即使启用了 nationalMode。使用 Ajax 表单时避免使用此选项，而只需调用 getNumber 以获取完整的国际号码以在请求中发送。注意：要求输入在表单元素内，因为此功能通过侦听最近的表单元素上的提交事件来工作。另请注意，由于它在内部使用 getNumber，首先它需要 utilsScript 选项，其次它需要一个有效数字，因此只能在验证后使用。

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 代码

你可以得到完整的数字

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

【讨论】：

var full_number = $(".iti__selected-dial-code").text();警报（完整号码）

【解决方案3】：

HTML

(ng2TelOutput)="getNumberCellNo1($event)"

Javascript

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

getNumber() 将为您提供国家代码和号码 +919843133490。 setNumber 将设置国家标志并放置数字客栈输入字段。

希望它有所帮助。任何进一步的问题都可以提出来。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在您发布的链接中搜索了一下，我发现nice example 正在按照您的要求进行操作

从例子中得到一些启发，这里是代码

HTML

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

JS

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);
});

【讨论】：

这对我有用，而不是 country.val(iti.getSelectedCountryData().iso2); 我用 $("#code").val(($("#phone").intlTelInput("getSelectedCountryData").dialCode));

【解决方案6】：

// 在 intlTelInput.js 中添加代码以使用当前位置显示代码

$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: []
    };

【讨论】：

【解决方案7】：

用这个提交表单：

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

【讨论】：