javascript - 如何创建一个表单来更改按钮的 href url 的一部分？

Question

所以我想要一个可以更改另一个按钮(如下所示)的部分链接的表单(例如带有提交按钮的文本区域或其他简单的东西)。

此表单只会更改 href 链接的“receiveAddr”部分(会将“1313mainstreetlosangeles”更改为用户提交的地址)，但保持其他所有内容不变。

因此根据用户提交的文本仅更改按钮中 href 链接的一部分。

有什么办法吗？

<a class="button" id="btn" href="https://url.com/v1/?type=buy&amp;mode=popup&amp;receiveAddr=1313mainstreetlosangelesca&amp;receiveType=USD&amp;callback=url.com" target="_blank">Buy now</a>

Answer 1

看看URLSearchParams

您需要一个 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>