Search code examples
phphtmlformsbootstrap-5nav

How to navigate from one nav-tab pane to a form in another nav-tab pane's content and select an option in that form from which request is designed


I have a request references form that is on a nav-tab content page - page 3; If they select this option, I would like to redirect them to a form on another nav-tab. I also want the option "Request references" which is a drop down select option in the form to be selected upon arrival. How would I accomplish this?

These are my nav-tab buttons:

<button class="nav-link" id="nav-experience-tab" data-bs-toggle="tab" data-bs-target="#nav-experience" type="button" role="tab" aria-controls="nav-experience" aria-selected="false">Experience</button>
<button class="nav-link" id="nav-contactme-tab" data-bs-toggle="tab" data-bs-target="#nav-contactme"
 type="button" role="tab" aria-controls="nav-contactme" aria-selected="false">Contact Me</button>

The nav-tab that my button for redirecting is on this nav-tab...

<div class="tab-pane fade" id="nav-experience" role="tabpanel" aria-labelledby="nav-experience-tab" tabindex="0">

The corresponding button on this nav-tab is: 

<button id="RequestReferences" class="btn btn-secondary btn-lg border-info border-2">
Request References!</button>

My other navtab is ...

<div class="tab-pane fade" id="nav-contactme" role="tabpanel" aria-labelledby="nav-contactme-tab" tabindex="0">  

My form on this nav-tab is ... 

<form method="post" class="needs-validation" novalidate>
<select class="form-select form-select-lg mb-3" id="reason" name="reason" aria-label="Reason for contacting me" required>
<option value="2">I would like to request references from your online Resume</option>
<button type="submit" id="submit" class="btn btn-secondary btn-lg border-2 border-info shadow-lg">Submit</button>

I'm assuming just wrap the below button in an a tag or including a target value within it's attributes. That button again is ...

<button id="RequestReferences" class="btn btn-secondary btn-lg border-info border-2">
Request References!</button>

Send love


Solution

  • This worked

        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); //replaces the hash
    }
    
    if (localStorage.getItem('selectedOption')) {
      const option = localStorage.getItem('selectedOption');
      document.getElementById('reason').selectedIndex = option;
      localStorage.removeItem("selectedOption");
    }