所以我想要一个表单(例如带有提交按钮的文本区域或简单的东西),可以更改另一个按钮的部分链接(如下所示)。
此表单只会更改 href 链接的“receiveAddr”部分(会将“1313mainstreetlosangeles”更改为用户提交的地址),但其他所有内容保持不变。
因此,根据用户提交的文本仅更改按钮中 href 链接的一部分。
有什么办法可以做到这一点吗?
<a class="button" id="btn" href="https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com" target="_blank">Buy now</a>
最佳答案
您将需要 polyfill for IE
let url = new URL("https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com");
let params = new URLSearchParams(url.search);
document.getElementById("btn").addEventListener("click", function(e) {
var addr = document.getElementById("addr").value.trim();
if (addr) {
params.set('receiveAddr', addr);
url.search = params.toString();
this.href=url;
console.log(url);
} else {
e.preventDefault();
document.getElementById("addr").focus();
alert("Please fill in an address");
}
});
<input type="text" id="addr" />
<a class="button" id="btn" target="_blank">Buy now</a>
替代方案 - 注意encodeURIComponent
document.getElementById("btn").addEventListener("click", function(e) {
var addr = document.getElementById("addr").value.trim();
if (addr) {
addr = encodeURIComponent(addr);
var url = `https://url.com/v1/?type=buy&mode=popup&receiveAddr=${addr}&receiveType=USD&callback=url.com`
this.href=url;
console.log(url);
} else {
e.preventDefault();
document.getElementById("addr").focus();
alert("Please fill in an address");
}
});
<input type="text" id="addr" />
<a class="button" id="btn" target="_blank">Buy now</a>
关于javascript - 如何创建一个表单来更改按钮的部分 href url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57533563/