CODEWITHSUNDEEP
javascript
Robin
Robin

Reputation: 61

preselecting a value based on URL with javascript

I'm currently working on a website which has a search engine including advanced search options with filters. I want that the category based on the url is chosen so the related filters will be displayed. For example if the visitor is at domain.com/category/adventure, then the category is pre-selected to 'adventure'. I'm not exactly sure how to read a url.

<script>

var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")

// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";

// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {

if (mainCat.value == "-1") 
{
  customFields.style.display = "none";
}
else
{
  customFields.style.display = "inline";
}

})

</script>

Possible values for the mainCat are: adventure, culinary, day-tours and so on. I want these values to be selected based on the url (domain.com/category/adventure... domain.com/category/culinary..) customFields is the id of a div container which displays all the filters with php generated content. mainCat is the id of the category, if the value is -1, no category is chosen.

Upvotes: 2

Views: 201

Answers (2)

Dacre Denny
Dacre Denny

Reputation: 30360

To preselect the category of your <select> element, you could extract the category from the current location of the browser (this contains the URL), and then update the value of your <select> element accordingly:

<script>

  var mainCat = document.getElementById("main_cat")
  var customFields = document.getElementById("custom_fields")

  // When the website first loads, hide "custom_fields" by default
  customFields.style.display = "none";

  // When the user changes the main_cat select, check it's value. If
  // value == "-1" then hide custom_fields. Otherwise display custom
  // fields as inline
  mainCat.addEventListener("change", function() {

  if (mainCat.value == "-1") 
  {
    customFields.style.display = "none";
  }
  else
  {
    customFields.style.display = "inline";
  }

  })

  //[ADDED]

  // Extract category from current url
  const category = location.pathname
  .split('/') // Break pathname to array of strings, split by '/' characters
  .filter(function(item) { return !!item; }) // Remove any empty strings from array
  .splice(-1); // Get last string (your category) from array

  // Update value of select element to current category
  document.getElementById("main_cat").value = category;

</script>

UPDATE

Based on the CSS and DOM structure of the website, these adjustments to the code should achieve what you require:

<script>


    // [ ADDED ]
  function updateCategoryFilters(category) {
    // Reset visiblitiy of all fields
    for(const node of document.querySelectorAll('#custom_fields .custom-field-cat')) {
      node.style.display = "none";
    }

    if(category) {

      category = category.toLowerCase()

      // If category is valid, set visiblitiy of fields for that category
      for(const node of document.querySelectorAll('#custom_fields .custom-field-cat-' + category)) {
        node.style.display = ""; // [ UPDATED ]
      }
    }


  }

  var mainCat = document.getElementById("main_cat")

  // When the user changes the main_cat select, check it's value. If
  // value == "-1" then hide custom_fields. Otherwise display custom
  // fields as inline
  mainCat.addEventListener("change", function() {

    // [ UPDATED ]
    updateCategoryFilters(mainCat.value)
  })

  //[ADDED]

  // Extract category from current url
  const category = location.pathname
  .split('/') // Break pathname to array of strings, split by '/' characters
  .filter(function(item) { return !!item; }) // Remove any empty strings from array
  .splice(-1); // Get last string (your category) from array

  // [ UPDATED ]
  // Update value of select element to current category
  updateCategoryFilters(category);

  // [ UPDATED ]
  document.getElementById("main_cat").value = category;

</script>

Upvotes: 2

smac89
smac89

Reputation: 43088

Use window.location:

console.log(window.location.pathname);

You can then break apart the path by splitting on / character, then populate the fields as you walk through the elements of the path.

Upvotes: 0

Related Questions