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

Question

This post ( Arindam Roychowdhury ) shows how a text box value can be used to change the href of an anchor tag. 这篇文章(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>

Brilliant, But in order to navigate to the new url.太棒了，但是为了导航到新的 url。 you need to click the anchor tag.您需要单击锚标记。 Two clicks to do the job.两次点击即可完成工作。

Is it possible to click the anchor and run JS code which changes the href and then navigates to the new url?是否可以单击锚点并运行更改 href 的 JS 代码，然后导航到新的 url？ Just a single click to get to the new url.只需单击一下即可访问新的 url。 Thanks.谢谢。

This is the revised code implementing the window.location code phuzi proposed...这是实现 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>

Another thought:另一个想法：

This post shows the use of on.input to monitor a text box for every change. 这篇文章展示了使用 on.input 来监控文本框的每次更改。 If code is included to update the href of an anchor tag and when the user moves to the link with the updated href, clicking it will pass the current value in all the fields.如果包含更新锚标记的 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>

Using an href has an advantage over a simple re-direct by allowing a class to be attached - in this case to open the new link in a pop-up.通过允许附加 class ，使用 href 比简单的重定向具有优势 - 在这种情况下，可以在弹出窗口中打开新链接。

Thanks again to everyone for their help on this.再次感谢大家对此的帮助。

Answer 1

It's not clear why you would want to do this, but you can easily set the href property and then navigate to whatever that URL is by doing something like this:目前尚不清楚您为什么要这样做，但您可以轻松设置href属性，然后通过执行以下操作导航到 URL 的任何内容：

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

 <a id="link" href="#" /> Click Me </a>

If you wanted to do with a button, same thing(ish):如果你想用一个按钮做同样的事情（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>

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

问题描述

1 个解决方案

解决方案1
2 2021-02-12 16:34:37

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

问题描述

1 个解决方案

解决方案1 2 2021-02-12 16:34:37

解决方案1
2 2021-02-12 16:34:37