Question

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

我是如此初学者，并且只是混淆了如何使其工作正常。对不起，如果问题不是那么难，但我真的不知道这是怎么回事。

我的jQuery代码： -

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

Answer 1

intlTelInput选项：

hiddenInput

添加具有给定名称的隐藏输入。或者，如果您的输入名称包含方括号（例如name =“ phone_number [main]”），则它将为隐藏的输入提供相同的名称，并用给定名称替换方括号的内容（例如，如果您使用hiddenInput初始化插件，：“ full”，那么在这种情况下，隐藏的输入将具有name =“ phone_number [full]”）。提交后，它将使用完整的国际号码（使用getNumber）自动填充隐藏的输入。这是使用非Ajax表单的人获取完整的国际号码的快捷方式，即使启用了nationalMode。使用Ajax表单时，请避免使用此选项，而只需调用getNumber即可获取要发送的完整国际号码。注意：要求输入必须在form元素内部，因为此功能通过侦听最近的form元素上的Submit事件来起作用。还要注意，由于此方法在内部使用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'];

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

<强> JAVASCRIPT：

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

Answer 3

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

Answer 4

在您发布的链接中搜索了一点，我发现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);
});

Answer 5

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

Answer 6

HTML

(ng2TelOutput)="getNumberCellNo1($event)"

JavaScript

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

getNumber()将为您提供国家代码和电话号码，即+919843133490。 setNumber将设置国家/地区标志，并将数字输入到输入栏。

希望有帮助。可以询问其他任何查询。

Answer 7

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 代码在下面的代码之后

//更新所选国家的标题属性

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

如何在提交表单后从（intl-tel-input）插件获取国家/地区代码？

7 个答案: