Question

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

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

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

这是javascript：

http://example.com/page1/7

但是，当我单击实际的捐赠按钮时，它将输入的值添加到当前页面url的末尾，例如：http://example.com/donate/?amount=7，而不是将您带到// Try your foreach loop like the following. $html = NULL; $html .= '<tr>'; foreach($row as $item) { $html .= '<td>'. $item . '</td>'; } $html .= '</tr>'; echo $html;。

我知道这一定很简单。我该如何解决？

更新错误

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

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

未捕获的TypeError：$不是函数

更新2.0

我找不到解决该错误的简便方法，但是在我的搜索中，我确实找到了一个非JavaScript依赖的解决方案，如果有人对此感兴趣的话：

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

Answer 1

您的代码存在问题，就是您用输入的值覆盖了链接的href属性。这使锚点href相对于当前页面的URL，这就是为什么它导航到URL，例如http://example.com/page1/7。

您需要使用输入框的值更改查询参数。

一种方法是使用URL API来更改amount查询参数。请参见以下代码段。

$('#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>

根据输入值更改href目的地

1 个答案: