PHP get phone number using intl-tel-input
I can't GET or POST the data from intl-tel-input form that sent. Does anyone know how to solve this?
I'm using intl-tel-input at https://github.com/jackocnr/intl-tel-input to get visitors country and phone code.
Follow are my form
<form action="<?php echo "http://" . $_SERVER["HTTP_HOST"]; ?>/send.php" method="post" enctype="multipart/form-data" id="rsv">
<table width="100%" 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>
below are the send.php
if(!empty($_POST["book"] && isset($_POST["book"]))){
echo $_POST['listcountry'];
echo $_POST['country'];
echo $_POST['phone'];
echo $_POST['phonefull'];
}
Below are the 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);
});
Please assist me guys
Thank in advance.
Answer
Try the following code and choose needed part only..
<?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 width="100%" 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>