提交表单后如何从（intl-tel-input）插件获取国家代码？
Posted
技术标签:
【中文标题】提交表单后如何从（intl-tel-input）插件获取国家代码？【英文标题】：How to get Country Code from (intl-tel-input) plugin after submitting the form? 【发布时间】：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
【参考方案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"));
);
【讨论】：
以上是关于提交表单后如何从（intl-tel-input）插件获取国家代码？的主要内容，如果未能解决你的问题，请参考以下文章