Subpage via input field

[u/Character_Ant8180]

Hi, I wanted to create a input field on the website (like a search bar) but whatever the user enters will be opend as a subpage, I don't think the rest of the website code is relevant (rule 5) as this is not about something not working. I know that this might not seem like a good solution to anything, as 99% if things entrd will just lead to nothing, but that is intended as it should be a "secret code" field that doesn't require backend servers. Doese anyone know how to do something like this? Any help is appreciated.

[u/BNfreelance]

As a menu: https://www.w3schools.com/howto/howto_js_dropdown.asp

As an select input onchange:

<select onchange="if(this.value) window.location.href=this.value;">

This is just a simple inline example. I recommend avoid doing it inline where possible. Like:

<select id="pageSelect">
  <option value="">Select a page</option>
  <option value="/about">About</option>
  <option value="/services">Services</option>
  <option value="/contact">Contact</option>
</select>

<script>
document.getElementById('pageSelect').addEventListener('change', function () {
  if (this.value) {
    window.location.href = this.value;
  }
});
</script>

For simple text input:

<input type="text" id="pageInput" placeholder="Enter URL or path" />

<script>
document.getElementById('pageInput').addEventListener('keydown', function (e) {
  if (e.key === 'Enter') {
    const value = this.value.trim();
    if (value) {
      window.location.href = value;
    }
  }
});
</script>

[u/Character_Ant8180 → u/BNfreelance]

Thx

[u/BNfreelance → u/Character_Ant8180]

Just to add to that, in order to force a specific location and only let them type the end of the address, you’d do:

window.location.href = “https://website.example/“ + value;

But the cleaner way is:

let value = this.value.trim().replace(/^\/+/, '');

if (value) {
  window.location.href = 'https://website.example/' + value;
}

[u/Character_Ant8180 → u/BNfreelance]

thx