my phtml file
<div class="home-del-days-main-cont">
<div class="hof-changeoutletcontent">
<div class="h-find-de-day">
<h2><?php echo __("Enter your postcode to find delivery days ");?></h2>
<div>
<p style="text-align: center;"><?php // echo __("Please enter a delivery postcode to see delivery days.");?></p>
</div>
</div>
</div>
<div>
<div class="h-news-frm">
<div>
<div class="h-news-left">
<input id="home-postcode" name="postcode" type="text" placeholder="<?php echo __("Enter your postcode");?>">
</div>
<div class="h-news-right" style="float: left;">
<a href="javascript:void(0)" id="zipcode-submit-button"><?php echo __("Find delivery days");?></a>
</div>
<div id="zipcode-error" style="display: none;" class="mage-error zipcode-error"><p><?php echo __('Enter your delivery Post-code.') ?></p>
</div>
<div id="zipcode-error-wrongformat" style="display: none;" class="mage-error zipcode-error-wrongformat" ><p><?php echo __('Please enter the postcode in the correct format e.g. AB12 3CD.') ?></p>
</div>
<div id="zipcode-error-notfound" style="display: none;" class="mage-error zipcode-error-notfound" ><p><?php echo __('Unable to find Post-code Delivery.') ?></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
require(['jquery','https://maps.googleapis.com/maps/api/js?key=AIzaSyC17wzmxfwqRcjVmbanfmsPGbT_Ngl2d7s'
], function($, googleMapApi) {
$("#zipcode-submit-button").on('click', function () {
var zipcodecurrentlocation = $('#home-postcode').val();
if(zipcodecurrentlocation=="") {
$(".h-news-frm #zipcode-error").show();
setTimeout(function() { $(".h-news-frm #zipcode-error").hide(); }, 5000);
return false;
}
zipcodecurrentlocation = zipcodecurrentlocation.replace(/ /g,'');
zipcodecurrentlocation = zipcodecurrentlocation.toUpperCase();
zipcodecurrentlocation = zipcodecurrentlocation.substring(0, zipcodecurrentlocation.length - 3) + " " + zipcodecurrentlocation.substring(zipcodecurrentlocation.length, zipcodecurrentlocation.length - 3);
isSuccessApi = 1;
validateZipcode(zipcodecurrentlocation);
function validateZipcode(zipcodecurrentlocation) {
var data = {'zipcode': zipcodecurrentlocation};
$.ajax({
url:'<?php echo $this->getUrl("zipcode/zipcode/getvendor") ?>',
type:'POST',
showLoader: true,
dataType:'json',
data: data,
complete: function(data) {
//console.log(data.responseJSON.validate);
if (data.responseJSON.validate!=0) {
window.location.href = data.responseJSON.redirecturl;
}else{
$(".h-news-frm #zipcode-error-notfound").show();
setTimeout(function() { $(".h-news-frm #zipcode-error-notfound").hide(); }, 5000);
errorGenerate = 1;
return false;
}
},
error: function (xhr, status, errorThrown) {
console.log('Error happens. Try again.');
errorGenerate = 1;
return false;
}
});
}
});
});
</script>
I don’t want to use inline script inside my phtml file, how can i use external js file to achive the same.
Thank you!