点击a标签时如何获取input输入值拼接为URL的notes参数

直接修改addURL函数逻辑，点击时实时读取输入框值拼接即可，注意处理URL编码和重复拼接问题，修改后完整代码如下：

<input name="MYNEWVALUE" class="MYNEWVALUE" maxlength="20" type="text" id="MYNEWVALUE">
<a onclick="addURL(this)" href="<?php echo $escaped_url?>">Click this</a>

<script>
function addURL(element)
{
    // 读取输入框实时输入值，去除首尾空格
    const noteValue = $('#MYNEWVALUE').val().trim();
    // 取标签上写的原始href，避免多次点击重复拼接参数
    const baseHref = element.getAttribute('href');
    // 编码输入内容后拼接参数，避免特殊字符破坏URL结构
    element.href = baseHref + '?notes=' + encodeURIComponent(noteValue);
}
</script>

关键逻辑说明 #

• 取值：输入框配置了唯一idMYNEWVALUE，通过jQuery选择器$('#MYNEWVALUE').val()即可拿到用户当前输入的内容，和class、name属性无关，id选择器是取值效率最高的方式。
• 编码：必须用encodeURIComponent()包裹输入值，否则用户输入空格、&、中文、问号这类特殊字符时，会导致URL参数解析错误。
• 防重复拼接：不要直接用this.href取值——浏览器会自动把href里的相对路径解析成带域名的完整地址，多次点击链接会反复追加?notes=xxx后缀，用getAttribute('href')拿到的是PHP渲染时写入的原始基础地址，每次点击都基于原始地址拼接，不会出现参数叠加问题。

如果不想依赖jQuery，也可以用原生JS实现，逻辑完全一致：

function addURL(element)
{
    const noteValue = document.getElementById('MYNEWVALUE').value.trim();
    const baseHref = element.getAttribute('href');
    element.href = baseHref + '?notes=' + encodeURIComponent(noteValue);
}

内容的提问来源于stack exchange，提问作者dss