redirect to form and select option only on button click – else default to the standard display of nav-tab

huangapple go评论100阅读模式
英文:

redirect to form and select option only on button click - else default to the standard display of nav-tab

问题

Sure, here is the translated code portion:

我有一个表单位于一个导航选项卡上,我从另一个导航选项卡链接到它。我使用下面的代码从多个页面链接到所有导航选项卡:

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

它可以工作,但是有两个问题:

  1. 如果可能的话,我想在从 URL 重定向后删除哈希标记。这是我在 JavaScript 的这部分遇到的一个问题。
  2. 另一个问题是:为了使用按钮链接到我的表单,我想出了以下解决方案:
  1. function redirectToForm() {
  2. window.location.href = "http://www.example.com/#nav-contact-me-tab";
  3. localStorage.setItem("selectedOption", "2");
  4. }
  5. const hash = window.location.hash;
  6. const bsTab = new bootstrap.Tab(hash);
  7. bsTab.show();
  8. var selectedOption = localStorage.getItem("selectedOption");
  9. document.getElementById("reason").value = selectedOption;
  10. localStorage.removeItem("selectedOption");

这一开始可以工作,但是如果我最终链接回表单,那么默认选项不再被选择。在某些情况下,可能根本没有选项被选择。我希望始终显示表单的默认选项(默认为“0”,否则为禁用选项),除非单击了我的按钮。只有当我的按钮被单击时,我才希望更改此值为选项 2。如果我从另一个链接重定向到我的表单,我希望默认禁用值显示。

这是我的按钮:

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

也许懂 JavaScript 更好的人可以:

  1. 帮助我在重定向到每个导航选项卡后删除哈希标记。
  2. 更好地组织我的代码,以便仅在单击按钮时选择选项 2。

否则,如果我链接到表单或任何其他导航选项卡,我只想使用这段代码:

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

如果需要进一步的帮助,请提出具体问题。谢谢!

英文:

I have a form on one nav-tab and I am linking to it from another nav-tab. I link to all of my nav-tabs from several pages using the code below.

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

it works, but:

  1. I would like to remove the hashtag after redirecting from the url if possible. That's one issue I'm having with this portion of my javascript.

  2. The Other is: In order to link to my form using a button, I came up with the following solution:

    1. function redirectToForm() {
    2. window.location.href = &quot;http://www.example.com/#nav-
    3. contact-me-tab&quot;;
    4. localStorage.setItem(&quot;selectedOption&quot;, &quot;2&quot;);
    5. }
    6. const hash=window.location.hash;
    7. const bsTab = new bootstrap.Tab(hash);
    8. bsTab.show();
    9. var selectedOption =
    10. localStorage.getItem(&quot;selectedOption&quot;);
    11. document.getElementById(&quot;reason&quot;).value = selectedOption;
    12. localStorage.removeItem(&quot;selectedOption&quot;);

This works at first glance, however, if I end up linking back to the form, the default option is no longer selected. In some cases, no option is selected. I want to always have the form show the default selected option ("0" by default which is disabled otherwise) unless my button is clicked. Only if my button is clicked do I want to change this value to option 2. If i redirect to my form from another link, I want the default disable value to display

This is my button:

  1. &lt;button id=&quot;gotoformselect2&quot; onclick=&quot;redirectToForm()&quot;&gt;Request References&lt;/button&gt;

Maybe someone who knows javascript a little better can:

  1. help me remove the hash after redirecting to each nav-tab &
  2. can better structure my code to only select option 2 if my button is clicked.

Otherwise, if I link to the form, or any other nav-tab for that matter, I want to only use this code:

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

Let me know if you can help! Thanks in advance.

答案1

得分: 0

  1. 使用 history API 替换哈希。
  2. 使用 selectedIndex 选择下拉选项。
  1. function redirectToForm() {
  2. window.location.href = "http://www.example.com/#nav-contact-me-tab";
  3. localStorage.setItem("selectedOption", "2");
  4. }
  5. if (location.hash) {
  6. const hash = location.hash;
  7. const bsTab = new bootstrap.Tab(hash);
  8. bsTab.show();
  9. history.replaceState('', null, location.origin + location.pathname); // 替换哈希
  10. }
  11. if (localStorage.getItem('selectedOption')) {
  12. const option = localStorage.getItem('selectedOption');
  13. document.getElementById('reason').selectedIndex = option;
  14. localStorage.removeItem("selectedOption");
  15. }
英文:
  1. Use history API to replace the hash.
  2. Use selectedIndex to select for dropdown option.

<!-- -->

  1. function redirectToForm() {
  2. window.location.href = &quot;http://www.example.com/#nav-contact-me-tab&quot;;
  3. localStorage.setItem(&quot;selectedOption&quot;, &quot;2&quot;);
  4. }
  5. if (location.hash) {
  6. const hash = location.hash;
  7. const bsTab = new bootstrap.Tab(hash);
  8. bsTab.show();
  9. history.replaceState(&#39;&#39;, null, location.origin+location.pathname); //replaces the hash
  10. }
  11. if (localStorage.getItem(&#39;selectedOption&#39;)) {
  12. const option = localStorage.getItem(&#39;selectedOption&#39;);
  13. document.getElementById(&#39;reason&#39;).selectedIndex = option;
  14. localStorage.removeItem(&quot;selectedOption&quot;);
  15. }

huangapple
  • 本文由 发表于 2023年5月11日 14:27:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76224709.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定