根据输入值更改 href 目标答案

【问题标题】：Changing href destination depending on input value根据输入值更改 href 目标
【发布时间】：2019-01-30 13:35:15
【问题描述】：

我目前正在创建一个允许自定义捐赠的捐赠表单。我的捐赠插件会检测 ?amount= url 值，并在用户登陆捐赠页面时预先选择它。

到目前为止，这是 html 输入：

<input type="text" placeholder="7.00" name="singular" id="singular">
<a href="http://example.com/donate/?amount=" id="myLink" class="et_pb_button dnt">Donate</a>

这是javascript：

$('#singular').on('input', function() {
  $('#myLink').prop('href', this.value);
});

然而，当我点击实际的捐赠按钮时，它会将输入的值添加到当前页面 url 的末尾，例如：http://example.com/page1/7 而不是将您带到http://example.com/donate/?amount=7。

我知道这一定是非常简单的事情。我该如何解决这个问题？

错误更新

加载https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 时，建议的脚本可以正常工作。

但是当我删除 jquery.min 并加载完整的 wordpress 核心 jquery（版本：1.12.4）时，Chrome Inspect 显示以下错误：

未捕获的类型错误：$ 不是函数

更新 2.0

我找不到解决错误的简单方法，但在我的搜索中，如果其他人有兴趣这样做，我确实找到了一个不依赖于 javascript 的解决方案：

How to pass input field values as a url query string that will be opened on click of a submit button?

【问题讨论】：

标签： javascript forms input

【解决方案1】：

您的代码的问题是您正在通过输入值覆盖链接的href 属性。这使得锚点的 href 相对于当前页面的 URL，这就是它导航到 URL 的原因，例如 http://example.com/page1/7。

您需要将查询参数更改为输入框的值。

一种方法是使用URL API 来更改amount 查询参数。看下面的sn-p。

$('#singular').on('input', function() {
  var href = new URL($('#myLink').prop('href'));
  href.searchParams.set('amount', this.value);
  $('#myLink').prop('href', href.toString())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="7.00" name="singular" id="singular">
<a href="http://example.com/donate/?amount=" id="myLink" class="et_pb_button dnt">Donate</a>

【讨论】：