get href from php and use element in JQuery

Question

I have xyz.php and working menu <li> elements. I need to get href from php use it in Java script for navigate away. So I have list of li tag and in code it's displaying one for example. Each li tag has unique href .

My question is: If I have select only one li elements from the list. I want to use that li's associated href in IF condition in JavaScript and ELSE part is multiple Li's selected. The code is working for else part. But, I am having issue with IF part.

I am not getting the href value from PHP. you can get 'href'from $xyz['url'] in php.

xyz.php
   <div class="global-wrapper">
     <ul class="list">
       <li> 
         <a href="#" data-categoryid="<?php echo $xyz['url']; ?>" class="loadProducts"></a>
         <input id="retreat-<?php echo $xyz['api_id']; ?>" class="custom-check-input more-filter-experience" type="checkbox" value="<?php echo $xyz['name']; ?>" data-home-location="<?php echo $xyz['api_id']; ?>">
         <label class="custom-check-label" for="retreat-<?php echo $xyz['api_id']; ?>"></label>
     </li>
   </ul>
</div>   

Here, the java script code:

xyz.js
     if(retreatIdArray.length === 1  && exploreDate === undefined) {
         var categoryId = $('.global-wrapper').find('.loadProducts').attr('data-categoryid');;  

             window.location.href = "/categoryId";   // having issue
      } else{
             window.location.href = '/destination';
      }

Answer 1

You wrote undefine instead of undefined . The statement inside if will never be true.

Also, to check for undefined , it's better to use typeof .

if(retreatIdArray.length === 1 && typeof exploreDate == 'undefined') {
    retreats = $('.global_wrapper').find('.custom-check-input').val();
    window.location.href = '/href';
} else {
    window.location.href = '/destination';
}

Note: untested code, you may have to adjust it to your needs. Please let me know if it works.