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

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

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:

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

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

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

  1. 如果可能的话,我想在从 URL 重定向后删除哈希标记。这是我在 JavaScript 的这部分遇到的一个问题。
  2. 另一个问题是:为了使用按钮链接到我的表单,我想出了以下解决方案:
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");

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

这是我的按钮:

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

也许懂 JavaScript 更好的人可以:

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

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

const hash = window.location.hash;
const bsTab = new bootstrap.Tab(hash);
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.

     const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        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:

        function redirectToForm() {
            window.location.href = &quot;http://www.example.com/#nav- 
        contact-me-tab&quot;;
            localStorage.setItem(&quot;selectedOption&quot;, &quot;2&quot;);
        }
    
        const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();
    
        var selectedOption = 
      localStorage.getItem(&quot;selectedOption&quot;);
        document.getElementById(&quot;reason&quot;).value = selectedOption;
        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:

&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:

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

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

答案1

得分: 0

  1. 使用 history API 替换哈希。
  2. 使用 selectedIndex 选择下拉选项。
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); // 替换哈希
}

if (localStorage.getItem('selectedOption')) {
  const option = localStorage.getItem('selectedOption');
  document.getElementById('reason').selectedIndex = option;
  localStorage.removeItem("selectedOption");
}
英文:
  1. Use history API to replace the hash.
  2. Use selectedIndex to select for dropdown option.

<!-- -->

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

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

if (localStorage.getItem(&#39;selectedOption&#39;)) {
  const option = localStorage.getItem(&#39;selectedOption&#39;);
  document.getElementById(&#39;reason&#39;).selectedIndex = option;
  localStorage.removeItem(&quot;selectedOption&quot;);
}

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:

确定