Skip to content

How to use external js for the phtml files in magento 2

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!