提交表单后如何从(intl-tel-input)插件获取国家代码?

Mao*_*der 7 php mysql forms jquery

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

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

我拥有的 jQuery 代码:-

$("#telephone").intlTelInput({ 
    initialCountry: "sd",
    separateDialCode: true 
});
Run Code Online (Sandbox Code Playgroud)

Ram*_*esh 9

国际电话输入选项:

隐藏输入

添加具有给定名称的隐藏输入。或者,如果您的输入名称包含方括号(例如 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)
  
});
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

代码

你可以得到完整的数字,比如

$phone_number = $_REQUEST['phone_number']['full'];
Run Code Online (Sandbox Code Playgroud)


小智 2

提交表格:

HTML:

<form action="post">
  <div class="select">
    <input type="hidden" id="phone2" name="phone"/>
    <input type="tel" id="phone" name="phone-full">
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

JavaScript:

$("form").submit(function() {
    $("#phone2").val($("#phone").intlTelInput("getNumber"));
});
Run Code Online (Sandbox Code Playgroud)