英文:
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();
它可以工作,但是有两个问题:
- 如果可能的话,我想在从 URL 重定向后删除哈希标记。这是我在 JavaScript 的这部分遇到的一个问题。
- 另一个问题是:为了使用按钮链接到我的表单,我想出了以下解决方案:
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 更好的人可以:
- 帮助我在重定向到每个导航选项卡后删除哈希标记。
- 更好地组织我的代码,以便仅在单击按钮时选择选项 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:
-
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.
-
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 = "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");
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:
<button id="gotoformselect2" onclick="redirectToForm()">Request References</button>
Maybe someone who knows javascript a little better can:
- help me remove the hash after redirecting to each nav-tab &
- 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
- 使用 history API 替换哈希。
- 使用 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");
}
英文:
- Use history API to replace the hash.
- Use selectedIndex to select for dropdown option.
<!-- -->
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");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论