如何使用 intl-tel-input 插件获取带有拨号代码的完整电话号码？

Question

我正在使用 intl-tel-input 插件到我的联系人和引用来源。 但是我只能检索输入的手机号码，而不能检索拨号代码。 我需要知道如何在提交表单时将这两个作为单一输入检索。 我在下面附上所有重要的代码供您参考。

HTML 表格>

<form action="" method="post" class="hq-form">

                    <div class="flex">
                        <div class="inputBox">
                            <span class="required">First Name :</span>
                            <input type="text" placeholder="Enter your first name" name="f_name">
                        </div>

                        <div class="inputBox">
                            <span class="required">Last Name :</span>
                            <input type="text" placeholder="Enter your last name" name="l_name">
                        </div>

                        <div class="inputBox">
                            <span class="required">Email :</span>
                            <input type="email" placeholder="Enter your email" name="email">
                        </div>

                        <div class="inputBoxm">
                            <span class="required">Mobile :</span>
                            <input id="phone" type="tel" placeholder="Enter your mobile number" name="phone">
                        </div>

                        <div class="inputBox">
                            <span class="required">Industry :</span>
                            <select name="pack" id="pack">
                                <option value="Individuals">Individuals</option>
                                <option value="Professionals">Professionals</option>
                                <option value="Sole Proprietorship">Sole Proprietorship</option>
                                <option value="Partnership">Partnership</option>
                                <option value="Limited liable">Limited liable</option>
                                <option value="Private limited company">Private limited company</option>
                                <option value="Limited liability company">Limited liability company</option>
                                <option value="Public listed company">Public listed company</option>
                                <option value="Group of company">Group of company</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="inputBox">
                            <span>Note :</span>
                            <textarea name="message" id="msg" cols="100" rows="5" placeholder="Enter your message"></textarea>
                        </div>

                        
                        <div>
                            <p class="success"> <?php echo $success;  ?></p>
                            <p class="failed"> <?php echo $failed;  ?></p>
                        </div>

                    </div>

                    <input type="submit" value="Get a Quote" class="btn" name="submit">
                    
                </form>

PHP 文件发送详细信息为 email

<?php  
 
    if(isset($_POST['submit'])) {
    $mailto = "admin@rja-lk.com";  //My email address
    //getting customer data
    $f_name = $_POST['f_name']; //getting customer first name
    $l_name = $_POST['l_name']; //getting customer last name
    $fromEmail = $_POST['email']; //getting customer email
    $phone = $_POST['phone']['full']; //getting customer Phome number
    $pack = $_POST['pack']; //getting customer preferred plan
    $message = $_POST['message']; //getting customer message
    $subject = "You have a new quote request!"; // For customer confirmation
    $subject2 = "Confirmation: Your quote request was submitted successfully!"; // For customer confirmation
    
    //Email body I will receive
    $message = "Cleint First Name: " . $f_name . "\n\n"
    . "Last Name: " . $l_name . "\n\n"
    . "Email: " . $fromEmail . "\n\n"
    . "Mobile Number: " . $phone . "\n\n"
    . "Industry: " . $pack . "\n\n"
    . "Message: " . "\n" . $_POST['message'];
    
    //Message for client confirmation
    $message2 = "Dear" . $l_name . "\n"
    . "Thank you for requesting a quote from us. We will get back to you shortly!" . "\n\n"
    . "You request a quote for the following industry : " . "\n" . $_POST['pack'] . "\n\n"
    . "Regards," . "\n" . "- RJ Associates Team";
    
    //Email headers
    $headers = "From: " . $fromEmail; // Client email, I will receive
    $headers2 = "From: " . $mailto; // This will receive client
    
    //PHP mailer function
    
    $result1 = mail($mailto, $subject, $message, $headers); // This email sent to My address
    $result2 = mail($fromEmail, $subject2, $message2, $headers2); //This confirmation email to client
    
    //Checking if Mails sent successfully
    
    if ($result1 && $result2) {
        $success = "Your request was sent Successfully!";
    } else {
        $failed = "Sorry! Request was not sent, Try again Later.";
    }
    
    }
 
?>

int-tel-input 插件的 Javascipt 代码

<script src="intl-tel-input/build/js//intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");

  window.intlTelInput(input, {
    // any initialisation options go here
    preferredCountries: ['us', 'gb', 'lk'],
    initialCountry: "gb",hiddenInput: "full_phone",
  });

</script>

我尝试了 stackoverflow 中给出的许多解决方案，但没有任何效果。 可能是我的错。 所以，我期待你们的回复 swift。 谢谢你！

Answer 1

您可以为此使用单一input ，我创建了两个输入只是为了让您了解它是如何工作的。 将您的电话号码放在第一个框中，您将在第二个框中获得带有country code的实际号码。

 $(document).ready(function() { var phoneInputID = "#phone"; var input = document.querySelector(phoneInputID); var iti = window.intlTelInput(input, { formatOnDisplay: true, geoIpLookup: function(callback) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country)? resp.country: ""; callback(countryCode); }); }, hiddenInput: "full_number", initialCountry: "auto", // separateDialCode: true, utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js" }); input.addEventListener('input', function() { var fullNumber = iti.getNumber(); document.getElementById('phone2').value = fullNumber; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.css" rel="stylesheet" /> <input id="phone" type="tel" placeholder="Enter your mobile number" name="phone"> <input id="phone2" type="tel" placeholder="Enter your mobile number" name="phone">