使用表单值更改锚标记的 href 并单击新链接答案

【问题标题】：Alter the href of an anchor tag with form values and follow the new link with a single click使用表单值更改锚标记的 href 并单击新链接
【发布时间】：2021-05-16 09:58:06
【问题描述】：

This post (Arindam Roychowdhury) 展示了如何使用文本框值来更改锚标记的 href。

<html>
<body>

Hi everyone

<p id="result"></p>

<textarea cols="40" id="SearchText" rows="2"></textarea>

<button onclick="myFunction()" type="button">Submit!</button>

<script>
function myFunction() {
    var result = document.getElementById("SearchText").value;
        document.getElementById("result").innerHTML = result;
        document.getElementById("abc").href="http://arindam31.pythonanywhere.com/hello/" + result;
}       
</script>


<a href="#" id="abc">abc</a>

太棒了！但是为了导航到新的 url，您需要单击锚标记。 两次点击完成这项工作。

是否可以单击锚点并运行更改 href 然后导航到新 url 的 JS 代码？只需单击即可访问新网址。谢谢。

这是实现window.location代码phuzi提出的修改代码...

<p id="result"></p>
<textarea cols="40" id="SearchText" rows="2"></textarea>

<button onclick="myFunction()" type="button">Submit!</button>

<script>
function myFunction() {
   var result = document.getElementById("SearchText").value;
   document.getElementById("result").innerHTML = result;

   window.location= "http://example.com/live/" + result;
}       
</script>

另一个想法：

This post 展示了使用 on.input 来监视文本框的每次更改。如果包含更新锚标记的href的代码，并且当用户移动到具有更新href的链接时，单击它将传递所有字段中的当前值。

<style>

p.hidden {
  display: none;
}

</style>

<p id="result" class="hidden">  </p>

<textarea cols="40" id="SearchText" rows="1"></textarea>

<script>

jQuery('#SearchText').on('input', function() {
    //alert('Text1 changed!');
     var result = document.getElementById("SearchText").value;
        document.getElementById("result").innerHTML = result;
        document.getElementById("abc").href="http://example.com/live/" + 
        result;
});

</script>


<a href="#" class="colorbox-popup" id="abc">Add New Record</a>

与简单的重定向相比，使用 href 的优势在于允许附加类 - 在这种情况下，可以在弹出窗口中打开新链接。

再次感谢大家对此提供的帮助。

【问题讨论】：

Window.location = 'Your new url' 不需要更新锚标签上的href
这能回答你的问题吗？ How do I redirect with JavaScript?
试试这个。 jsfiddle.net/pbu1f3Ly 只是应用了@phuzi 的建议。
谢谢 phuzi。正如您所说，无需更新锚标记。好的是这可以在 Drupal 页面中工作而不会出现任何错误。问题解决了。

标签： javascript html href

【解决方案1】：

不清楚您为什么要这样做，但您可以轻松设置 href 属性，然后通过执行以下操作导航到该 URL：

document.getElementById('link').addEventListener('click', (e) => {
  e.target.href = 'https://stackoverflow.com';
});

&lt;a id="link" href="#" /&gt; Click Me &lt;/a&gt;

如果你想用按钮做同样的事情（ish）：

document.getElementById('btn').addEventListener('click', (e) => {
  const anchor = document.getElementById('link');
  anchor.href = 'https://stackoverflow.com';
  window.location = anchor.href;
});

<a id="link" href="#" /> This is an anchor tag </a>

<button id="btn">Click me</button>

【讨论】：

谢谢。它在 Drupal 之外工作正常，但在 Drupal 页面中我得到... Uncaught TypeError: Cannot read property 'addEventListener' of null at j5:286。如果我在这里找到 Drupal 专家的解决方案，我会再次发帖。
那是因为它没有拾取元素。你确定选择器是正确的并且元素存在吗？