提交表格后如何从(intl-tel-input)插件中获取国家/地区代码? [英] How to get Country Code from (intl-tel-input) plugin after submitting the form?

查看:323
本文介绍了提交表格后如何从(intl-tel-input)插件中获取国家/地区代码?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经安装了该插件,并且该插件可以正确显示国家/地区,并且可以正常工作,但是当我提交输入类型为"tel"的表格时,该表格未提交国家/地区代码,我不知道它是如何工作的,但我确实阅读了 https://github.com/jackocnr/intl中的所有说明-tel-input 页,但我不了解如何将完整的数字+代码国家/地区合并在一起,因此无法将其插入MySQL数据库.

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.

我拥有的jQuery代码:-

The jQuery code I have:-

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

推荐答案

intlTelInput选项:

hiddenInput

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

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

您可以获得类似的完整号码

You can get full number like

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

这篇关于提交表格后如何从(intl-tel-input)插件中获取国家/地区代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆