I'm using intl-tel-input plugin to my contact and quote froms. But I'm capable of retrieving only the mobile number entered but not the dial code. I need to know how can I retrive both of this as single input upon form submission. I'm attaching all immportant codes below for your reference.
HTML Form>
<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 file that sending details as an 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.";
}
}
?>
Javascipt code for int-tel-input plugin
<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>
I'm tried many of the solution given in stackoverflow and nothing worked. May be it was my bad. So, I'm expecting a swift response from you guys. Thank you!
You can use single input for this I created two just to understand you how it is working. Put your phone number in the first box you will get the actual number with country code in the second one.
$(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">