PHP使用intl-tel-input获取电话号码

Posted 2023-05-09

【中文标题】PHP使用intl-tel-input获取电话号码

【英文标题】：PHP get phone number using intl-tel-input

【发布时间】：2016-05-30 20:20:57

【问题描述】：

我无法从发送的 intl-tel-input 表单获取或发布数据。有谁知道如何解决这个问题？

我正在使用https://github.com/jackocnr/intl-tel-input 的国际电话输入来获取访问者的国家和电话代码。

以下是我的表格

<form action="<?php echo "http://" . $_SERVER["HTTP_HOST"]; ?>/send.php"  method="post" enctype="multipart/form-data" id="rsv">
                <table  align="center" border="0" cellpadding="5" cellspacing="5">
                    <tbody>                             
                        <tr>
                            <td>Country:</td>
                            <td>
                                <select name="listcountry" id="listcountry"></select>
                                <input type="hidden" name="country" name="country" />
                            </td>
                        </tr>
                        <tr>
                            <td>Guest phone No.:</td>
                            <td>
                                <?php /* <input type="tel" name="phone" value="62361761688" size="40"> */ ?>
                                <input type="tel" name="phone" id="phone" placeholder="">
                                <input type="hidden" name="phonefull" id="phonefull" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" valign="middle">
                                <div class="myhr" style="border-bottom: 1px solid #E2E2E2;"></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" valign="middle">
                                Questions and special requests:<br><br><p></p>
                                <p>
                                    <textarea name="message" cols="40" rows="10"></textarea>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="left">
                                <input type="submit" name="book" value="Book Now">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>

下面是send.php

if(!empty($_POST["book"] && isset($_POST["book"])))
echo $_POST['listcountry'];
echo $_POST['country'];
echo $_POST['phone'];
echo $_POST['phonefull'];

以下是javascript：

$("#phone").intlTelInput(
    autoHideDialCode: true,
    autoPlaceholder: true,
    separateDialCode: true,
    nationalMode: true,
    geoIpLookup: function (callback) 
        $.get("http://ipinfo.io", function () , "jsonp").always(function (resp) 
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        );
    ,
    initialCountry: "auto",
);

// get the country data from the plugin
var countryData = $.fn.intlTelInput.getCountryData(),
  telInput = $("#phone"),
  addressDropdown = $("#listcountry");

// init plugin
telInput.intlTelInput(
  utilsScript: "../wp-content/themes/saba/build/js/utils.js" // just for formatting/placeholders etc
);

// populate the country dropdown
$.each(countryData, function(i, country) 
  addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
);

// listen to the telephone input for changes
telInput.on("countrychange", function() 
  var countryCode = telInput.intlTelInput("getSelectedCountryData").iso2;
  addressDropdown.val(countryCode);
);

// trigger a fake "change" event now, to trigger an initial sync
telInput.trigger("countrychange");

// listen to the address dropdown for changes
addressDropdown.change(function() 
  var countryCode = $(this).val();
  telInput.intlTelInput("setCountry", countryCode);
);

请帮帮我

提前致谢。

【问题讨论】：

遇到了同样的问题。运气好吗？

【参考方案1】：

试试下面的代码，只选择需要的部分..

<?php
//var_dump($_POST);
if(isset($_POST["book"]) && !empty($_POST["book"]))
    echo $_POST['listcountry'].','.$_POST['country'].','.$_POST['phone'].','.$_POST['phonefull'];

?>
<html>
<head>
    <title>INTEL INPUT</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.5.0/css/intlTelInput.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.5.0/js/intlTelInput.js"></script>  
    <script>
      $(function () 
      $("#phone").intlTelInput(
            autoHideDialCode: true,
            autoPlaceholder: true,
            separateDialCode: true,
            nationalMode: true,
            geoIpLookup: function (callback) 
                $.get("http://ipinfo.io", function () , "jsonp").always(function (resp) 
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                );
            ,
            initialCountry: "auto",
        );

        // get the country data from the plugin
        var countryData = $.fn.intlTelInput.getCountryData(),
          telInput = $("#phone"),
          addressDropdown = $("#listcountry");

        // init plugin
        telInput.intlTelInput(
          utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.5.0/js/utils.js" // just for formatting/placeholders etc
        );

        // populate the country dropdown
        $.each(countryData, function(i, country) 
          addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
        );

        // listen to the telephone input for changes
        telInput.on("countrychange", function() 
          var countryCode = telInput.intlTelInput("getSelectedCountryData").iso2;
          addressDropdown.val(countryCode);
        );

        // trigger a fake "change" event now, to trigger an initial sync
        telInput.trigger("countrychange");

        // listen to the address dropdown for changes
        addressDropdown.change(function() 
          var countryCode = $(this).val();
          telInput.intlTelInput("setCountry", countryCode);
        );

        // update the hidden input on submit
        $("form").submit(countryData,function(i, country) 
          $("#country").val(telInput.intlTelInput("getSelectedCountryData").name);
          $("#phonefull").val('+' + telInput.intlTelInput("getSelectedCountryData").dialCode + $("#phone").val());      
        );

      );
    </script>
</head>
<body>
    <form action=""  method="post" enctype="multipart/form-data" id="rsv">
        <table  align="center" border="0" cellpadding="5" cellspacing="5">
            <tbody>                             
                <tr>
                    <td>Country:</td>
                    <td>
                        <select name="listcountry" id="listcountry"></select>
                        <input type="hidden" name="country" id="country" />
                    </td>
                </tr>
                <tr>
                    <td>Guest phone No.:</td>
                    <td>
                        <?php /* <input type="tel" name="phone" value="62361761688" size="40"> */ ?>
                        <input type="tel" name="phone" id="phone" placeholder="">
                        <input type="hidden" name="phonefull" id="phonefull" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" valign="middle">
                        <div class="myhr" style="border-bottom: 1px solid #E2E2E2;"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" valign="middle">
                        Questions and special requests:<br><br><p></p>
                        <p>
                            <textarea name="message" cols="40" rows="10"></textarea>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="left">
                        <input type="submit" name="book" value="Book Now">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

【讨论】：

非常感谢