Redirect to form and select option only when button clicked - otherwise defaults to standard display of navigation tabs

Question

I have a form on one navigation tab and I link to it from another navigation tab. I'm using the code below to link to all my navigation tabs from multiple pages.

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

It works, but:

1. If possible I would like to remove the hashtag after redirecting from the url. This is a problem I'm having with this part of javascript.

2. Another one is: In order to use a button to link to my form, I came up with the following solution:

   function redirectToForm() {
           window.location.href = "http://www.example.com/#nav- 
       contact-me-tab";
           localStorage.setItem("selectedOption", "2");
       }
   
       const hash=window.location.hash;
       const bsTab = new bootstrap.Tab(hash);
       bsTab.show();
   
       var selectedOption = 
     localStorage.getItem("selectedOption");
       document.getElementById("reason").value = selectedOption;
       localStorage.removeItem("selectedOption");

At first glance this works, however, if I end up linking back to the form, the default option is no longer selected. In some cases, no options are selected. I want the form to always show the default selected option (which is "0" by default, otherwise it will be disabled) unless my button is clicked. I want to change this value to option 2 only when my button is clicked. If I redirect to my form from another link, I want the default disabled value to be displayed

This is my button:

<button id="gotoformselect2" onclick="redirectToForm()">Request References</button>

Perhaps someone who knows more about javascript can:

1. Help me remove hashes after redirect to every navigation tab&
2. Could better structure my code so that only option 2 is selected when my button is clicked.

Otherwise, if I link to a form or any other navigation tab, I just want to use this code:

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

If you can help, please let me know! Thanks in advance.

Answer 1

1. Replace the hash value using history API.
2. Use selectedIndex to select drop-down options.

function redirectToForm() {
  window.location.href = "http://www.example.com/#nav-contact-me-tab";
  localStorage.setItem("selectedOption", "2");
}

if (location.hash) {
  const hash = location.hash;
  const bsTab = new bootstrap.Tab(hash);
  bsTab.show();
  history.replaceState('', null, location.origin+location.pathname); //replaces the hash
}

if (localStorage.getItem('selectedOption')) {
  const option = localStorage.getItem('selectedOption');
  document.getElementById('reason').selectedIndex = option;
  localStorage.removeItem("selectedOption");
}