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
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");
}