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

标签 javascript html css

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

此表单只会更改 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>

最佳答案

看看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>

关于javascript - 如何创建一个表单来更改按钮的部分 href url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57533563/

相关文章:

javascript - onKeyDown 从 e.target.value 获取值?

javascript - Angular 2 “ng-style” “*ngFor” 内背景颜色变化

jquery - 滚动过去后固定一个 div

html - 居中对齐 3 个内联的 div 标签

html - 悬停效果不会调整我的按钮

javascript - Fullpage.js 插件部分位置元素

javascript - 更改提交按钮文本并在 iOs 中禁用它

javascript - 在 Javascript 中,如何在 "joined"数组周围加上单引号?

HTML5 上的 CSS 布局

html - 有没有办法在网上使用苹果的SF符号