GET提交搜索表单时如何正确追加额外term搜索参数

已搭建用于数据库检索的基础搜索框，需求为用户提交搜索词时，自动在搜索执行阶段附加额外的检索变量。其中用户输入搜索词对应的字段name属性值为term。
此前尝试通过添加隐藏域存放需要自动附加的搜索变量，但该隐藏域的name属性也必须设置为term才能匹配后端搜索逻辑；而表单以GET方式提交时，查询字符串中出现的重复term参数会导致搜索功能执行异常。

异常查询字符串示例：

term=%28dog+OR+cat%29+AND+%28young+OR+old%29&term=AND+veterinarian

当前使用的表单结构代码：

<form action="form link" class="class-name" id="search-form" method="get" target="_blank">
<div class="wrapper"><textarea class="query-box" id="query-box" name="term" value="" placeholder="text"></textarea></div>

<div class="wrapper-2">
<div class="class-name-2"><input id="id_term" name="term" value="AND (&quot;dog&quot;OR &quot;cat&quot;)" type="hidden"/></div>
    
<div class="button-wrapper"><button class="search-btn" type="submit"><span class="text"> Search </span></button></div>
</div>
</form>

不需要设置name为term的隐藏域，直接通过前端脚本在表单提交前拼接搜索词即可，从根源避免重复参数问题，具体操作如下：

• 第一步：删除现有表单中name="term"的隐藏输入域，消除重复参数来源
• 第二步：为表单绑定提交事件监听，在请求正式发起前，读取用户输入的搜索内容，将需要附加的检索规则拼接至用户输入内容末尾，再将拼接完成的完整值赋值回原name="term"的输入框，表单提交时就只会携带单个term参数，完全匹配后端逻辑。

实现代码参考：

const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('query-box');
// 定义需要自动附加的检索规则，可根据需求修改
const extraQuery = ' AND ("dog" OR "cat")';

searchForm.addEventListener('submit', function() {
  // 拼接用户输入和附加规则，自动处理输入为空的边界情况
  searchInput.value = `${searchInput.value.trim()} ${extraQuery}`.trim();
  // 无需阻止默认提交行为，表单会自动携带拼接后的单个term参数发起GET请求
})

该方案最终生成的查询字符串仅包含一个term参数，值为用户输入内容与附加检索规则的组合，不会出现重复参数导致的搜索异常。

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