使用 jquery [auto country by IP/intl-tel-input jquery library] 获取国家代码的输入值答案

【问题标题】：Get input value for country code with jquery [auto country by IP/intl-tel-input jquery library]使用 jquery [auto country by IP/intl-tel-input jquery library] 获取国家代码的输入值
【发布时间】：2019-11-14 13:01:06
【问题描述】：

我需要根据所选的国家/地区值向 URL 提交 COUNTRY CODE。

我为此使用 Intl-Tel-Input：https://github.com/jackocnr/intl-tel-input

这是 HTML 代码：

<form id="redirform" method="GET" action="#link"> 
                                <div class="gtd-form-wrapper">
                                    <input type="hidden" id="country" name="country">

                                <div class="form-group">
                                    <input name="phone" pattern="[0-9]*" id="phone" class="f w-input" data-value-missing="Use numbers only. No country code! No whitespaces!" required="required" placeholder="Phone">
                                </div> 

                                <div class="form-group">
                                    <button class="submit-button w-button gtd-form-submit" type="submit">SUBMIT</button>
                                </div>
                            </form>

这里是 jQuery：

        var input = document.querySelector("#phone");
        window.intlTelInput(input, {
            initialCountry: "auto",
            geoIpLookup: function(success, failure) {
                $.get("https://ipinfo.io/", function() {}, "jsonp").always(function(resp) {
                var countryCode = (resp && resp.country) ? resp.country : "";
                success(countryCode);
                });
            },
        });

        input.addEventListener('countrychange', function () {
                $('#country').val(iti.getSelectedCountryData().iso2);
            });

        $('#redirform').on('submit',function(){
        var $input = $(this).find("input[name=country]");
            $('#country').val(iti.getSelectedCountryData().iso2);
        });

这是我拥有和需要的图片： PICTURE CLICK TO OPEN

【问题讨论】：

你在哪里调用geoIpLookup函数？
它不向 URL 提交国家代码。我需要得到 ?country=LV ，但它是 ?country= ....... aka BLANK。
你能添加一段处理url导航的代码吗？
我不太明白。当您单击提交按钮时，有method="GET"。它应该从表单中获取值。所有需要的代码都在这里。
非常不清楚您要做什么，这个函数在哪里：getSelectedCountryData？尝试更详细，以便更容易为您提供帮助。

标签： javascript jquery intl-tel-input

【解决方案1】：

您似乎需要从 intl 输入中获取所选国家/地区的值。您无需在 HTML 中添加国家/地区输入。

    var intl = window.intlTelInput(input, {
        initialCountry: "auto",
        geoIpLookup: function(success, failure) {
            $.get("https://ipinfo.io/", function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            success(countryCode);
            });
        },
    });

    $('#redirform').on('submit', function(e) {
        e.preventDefault();
        var countryData = iti.getSelectedCountryData();

        var form = $('#form');
        form.append($("<input>").attr("type", "hidden").attr("name", "country").val(countryData.iso2));

        form.submit();
    });

在提交表单时，会创建一个隐藏的输入并设置值，因此您无需担心。

因为您已经告诉您需要将国家/地区值获取到 URL 中，所以表单将作为 GET 提交，因为表单的方法是 GET。

希望这会对您有所帮助。谢谢。

【讨论】：