Rediriger vers le formulaire et sélectionner l'option uniquement lorsque le bouton est cliqué - sinon, l'affichage par défaut des onglets de navigation est standard.

Question

J'ai un formulaire sur un onglet de navigation et j'y crée un lien depuis un autre onglet de navigation. J'utilise le code ci-dessous pour créer un lien vers tous mes onglets de navigation à partir de plusieurs pages.

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

Ça marche, mais :

1. Si possible, j'aimerais supprimer le hashtag après la redirection depuis l'url. C'est un problème que j'ai avec cette partie de javascript.

2. Une autre solution est la suivante : Afin d'utiliser des boutons pour créer un lien vers mon formulaire, j'ai trouvé la solution suivante :

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

À première vue, cela fonctionne, cependant, si je finis par créer un lien vers le formulaire, l'option par défaut n'est plus sélectionnée. Dans certains cas, aucune option n'est sélectionnée. Je souhaite que le formulaire affiche toujours l'option sélectionnée par défaut (qui est "0" par défaut, sinon elle sera désactivée) à moins que l'on clique sur mon bouton. Je souhaite changer cette valeur en option 2 uniquement lorsque l'on clique sur mon bouton. Si je redirige vers mon formulaire depuis un autre lien, je souhaite que la valeur désactivée par défaut soit affichée

Voici mon bouton :

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

Peut-être que quelqu'un qui en sait plus sur Javascript pourra :

1. Aidez-moi à supprimer les hachages après la redirection vers chaque onglet de navigation&
2. Pourrait mieux structurer mon code afin que seule l'option 2 soit sélectionnée lorsque l'on clique sur mon bouton.

Sinon, si je crée un lien vers un formulaire ou tout autre onglet de navigation, je souhaite simplement utiliser ce code :

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

Si vous pouvez m'aider, faites-le-moi savoir ! Merci d'avance.

Answer 1

1. Remplacez le hachage à l'aide de l'API d'historique.
2. Utilisez selectedIndex pour sélectionner les options déroulantes.

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