css 如何获得完整的电话号码与拨号代码使用intl-tel-input插件?

bfrts1fy  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(168)

我正在使用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文件

<?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.";
    }
    
    }
 
?>

内部电话输入插件的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中给出的解决方案,但都不起作用。可能是我的错。所以,我期待着你们的迅速回应。谢谢!

lb3vh1jj

lb3vh1jj1#

你可以使用单个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">

相关问题