Unable to get data from Postal Pincode API
Question
I have created a wordpress function in functions.php to get pincode details from API URI. I want to get city and state from the API in my form. Here is my wordpress function.
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});
function get_pincode () {
$pincode=$_POST['pincode'];
$data=file_get_contents('http://postalpincode.in/api/pincode/'.$pincode);
$data=json_decode($data);
if(isset($data->PostOffice['0'])){
$arr['city']=$data->PostOffice['0']->Taluk;
$arr['state']=$data->PostOffice['0']->State;
echo json_encode($arr);
}else{
echo 'no';
}}
add_action( 'wp_ajax_get_pincode', 'get_pincode' );
Here is the form where I am trying to get the values
<form class="elementor-form ihs_si_form" method="post" id="register_form" name="BHC - Registered User">
<input type="hidden" name="post_id" value="9297" />
<input type="hidden" name="form_id" value="f62431d" />
<input type="hidden" name="referer_title" value="Register" />
<input type="hidden" name="queried_id" value="9297" />
<div class="elementor-form-fields-wrapper elementor-labels-above">
<div class="elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-field_35e359d elementor-col-100 elementor-field-required">
<label for="form-field-field_35e359d" class="elementor-field-label">Phone Number</label>
<div id="ihs-country-code" class="ihs-country-code-exis-mob">
<div class="ihs-country-inp-wrap">
<span class=""><input type="text" name="ihs-country-code" value="+91" class="ihs-country-code" required="" placeholder="e.g. +91" aria-invalid="false" readonly="" maxlength="5" /></span>
</div>
</div>
<input
size="1"
type="tel"
name="form_fields[field_35e359d]"
id="form-field-field_35e359d"
class="elementor-field elementor-size-sm elementor-field-textual ihs-existing-mob-inp-fld"
placeholder="Phone Number"
required="required"
aria-required="true"
pattern="[0-9()#&+*-=.]+"
title="Only numbers and phone characters (#, -, *, etc) are accepted."
style="width: calc(100% - 5rem);"
/>
<label id="ihs-otp-required" class="ihs-otp-required ihs-otp-hide">
OTP( required )
<span class="wrap ihs-otp"><input type="number" id="ihs-mobile-otp" name="ihs-otp" value="" size="40" class="wpcf7-text wpcf7-validates-as-required ihs-otp-hide" aria-required="true" aria-invalid="false" /></span>
</label>
<div class="ihs-otp-btn" id="ihs-send-otp-btn">Send OTP</div>
<div class="ihs-otp-btn ihs-otp-hide" id="ihs-submit-otp-btn">Verify OTP</div>
<div class="ihs-otp-btn ihs-otp-hide" id="ihs-resend-otp-btn-id">Resend OTP</div>
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_8441032 elementor-col-50 elementor-sm-50 elementor-field-required">
<label for="form-field-field_8441032" class="elementor-field-label">Address line 1</label>
<input
size="1"
type="text"
name="form_fields[field_8441032]"
id="form-field-field_8441032"
class="elementor-field elementor-size-sm elementor-field-textual"
placeholder="Address line 1"
required="required"
aria-required="true"
/>
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_e040cd6 elementor-col-50 elementor-sm-50 elementor-field-required">
<label for="form-field-field_e040cd6" class="elementor-field-label">Address line 2</label>
<input
size="1"
type="text"
name="form_fields[field_e040cd6]"
id="form-field-field_e040cd6"
class="elementor-field elementor-size-sm elementor-field-textual"
placeholder="Address line 2"
required="required"
aria-required="true"
/>
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-pincode elementor-col-33 elementor-sm-60 elementor-field-required">
<label for="form-field-pincode" class="elementor-field-label">PIN Code</label>
<input size="1" type="text" name="form_fields[pincode]" id="form-field-pincode" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="PIN" required="required" aria-required="true" autocomplete="off" />
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-city elementor-col-33 elementor-sm-40 elementor-field-required">
<label for="form-field-city" class="elementor-field-label">City</label>
<input size="1" type="text" name="form_fields[city]" id="form-field-city" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="City" required="required" aria-required="true" />
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-state elementor-col-33 elementor-field-required">
<label for="form-field-state" class="elementor-field-label">State</label>
<input size="1" type="text" name="form_fields[state]" id="form-field-state" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="State" required="required" aria-required="true" />
</div>
<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_c5e80e9 elementor-col-33 elementor-sm-50 elementor-field-required">
<label for="form-field-field_c5e80e9" class="elementor-field-label">Date of Birth</label>
<input
type="text"
name="form_fields[field_c5e80e9]"
id="form-field-field_c5e80e9"
class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input"
placeholder="Your Date of Birth"
required="required"
aria-required="true"
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
/>
</div>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_517a55b elementor-col-33 elementor-sm-50 elementor-field-required">
<label for="form-field-field_517a55b" class="elementor-field-label">Gender</label>
<div class="elementor-field elementor-select-wrapper">
<select name="form_fields[field_517a55b]" id="form-field-field_517a55b" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_bee9025 elementor-col-33 elementor-sm-50 elementor-field-required">
<label for="form-field-field_bee9025" class="elementor-field-label">Marital Status</label>
<div class="elementor-field elementor-select-wrapper">
<select name="form_fields[field_bee9025]" id="form-field-field_bee9025" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
</div>
</div>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_16a2398 elementor-col-100 elementor-sm-50 elementor-field-required">
<label for="form-field-field_16a2398" class="elementor-field-label">English Fluency</label>
<div class="elementor-field elementor-select-wrapper">
<select name="form_fields[field_16a2398]" id="form-field-field_16a2398" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Expert">Expert</option>
</select>
</div>
</div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_d1250ef elementor-col-60 elementor-sm-50 elementor-field-required">
<label for="form-field-field_d1250ef" class="elementor-field-label">Church Name</label>
<input size="1" type="text" name="form_fields[field_d1250ef]" id="form-field-field_d1250ef" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Church Name" required="required" aria-required="true" />
</div>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_7850be2 elementor-col-40 elementor-sm-50 elementor-field-required">
<label for="form-field-field_7850be2" class="elementor-field-label">Role in the Church</label>
<div class="elementor-field elementor-select-wrapper">
<select name="form_fields[field_7850be2]" id="form-field-field_7850be2" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value="Pastor">Pastor</option>
<option value="Elder">Elder</option>
<option value="Deacon">Deacon</option>
<option value="Youth Leader">Youth Leader</option>
<option value="Worship Leader">Worship Leader</option>
<option value="Children Minister">Children Minister</option>
<option value="Intern">Intern</option>
<option value="Bible College Student">Bible College Student</option>
<option value="Church Staff">Church Staff</option>
<option value="Member">Member</option>
</select>
</div>
</div>
<div class="elementor-field-type-radio elementor-field-group elementor-column elementor-field-group-field_4fa2d07 elementor-col-100 elementor-field-required">
<label for="form-field-field_4fa2d07" class="elementor-field-label">Do you promise to give us a 1 Page feedback on all the 14 free books you will receive from us?</label>
<div class="elementor-field-subgroup elementor-subgroup-inline">
<span class="elementor-field-option">
<input type="radio" value="Yes" id="form-field-field_4fa2d07-0" name="form_fields[field_4fa2d07]" required="required" aria-required="true" /> <label for="form-field-field_4fa2d07-0">Yes</label>
</span>
<span class="elementor-field-option">
<input type="radio" value="No" id="form-field-field_4fa2d07-1" name="form_fields[field_4fa2d07]" required="required" aria-required="true" /> <label for="form-field-field_4fa2d07-1">No</label>
</span>
</div>
</div>
<div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons">
<button type="submit" class="elementor-button elementor-size-sm" id="register_camp_1">
<span>
<span class="elementor-button-icon"> </span>
<span class="elementor-button-text">Send</span>
</span>
</button>
</div>
</div>
</form>
Here is my jQuery json parsor script
<script>
function get_details(){
var pincode=jQuery('#form-field-pincode').val();
if(pincode==''){
jQuery('#form-field-city').val('');
jQuery('#form-field-state').val('');
}else{
jQuery.ajax({
action: 'get_pincode',
type: 'POST',
dataType: 'json',
data:'pincode='+pincode,
success:function(data){
console.log('Submission was successful.');
if(data=='no'){
alert('Wrong Pincode');
jQuery('#form-field-city').val('');
jQuery('#form-field-state').val('');
}else{
var getData=JSON.parse(data);
jQuery('#form-field-city').val(getData.city);
jQuery('#form-field-state').val(getData.state);
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data.pincode);
}
});
}
}
jQuery("#form-field-pincode").keyup(function(){
get_details();
});
</script>
Please help me figure out the error.
Thanks
1 answers
solution1
0 2021-04-23 08:39:49
Believe you are using the data submission URL as action: 'get_pincode' . Its should be url: 'get_pincode' . Make sure the get_pincode is a complete & correct url to your method defined in php file.
jQuery.ajax({
url: 'get_pincode',
type: 'POST',
dataType: 'json',
data: 'pincode='+pincode,
success:function(data){
console.log('Submission was successful.');
if(data ==='no'){
alert('Wrong Pincode');
jQuery('#form-field-city').val('');
jQuery('#form-field-state').val('');
}else{
var getData=JSON.parse(data);
jQuery('#form-field-city').val(getData.city);
jQuery('#form-field-state').val(getData.state);
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data.pincode);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unable to get data from Wikipedia API
How do I get the postal code from google map's autocomplete api
Unable to get json data from rest api in php
Unable to get data from AJAX API using URL link
Unable to get data from JSON
Unable to get entire information from linkedIn api
Jquery Ajax is unable to get data from ASP.NET WEB API
Unable to GET data from ajax (get)
Get postal code with autocomplete service
jQuery Geocode to get Postal Address
Related Tags