更新HTML搜索表单时如何保留次要GET变量？

核心问题是表单默认只会提交自身包含的字段，所以需要把次要GET变量以某种方式嵌入表单提交流程中，以下是三种适配不同场景的实现方式：

1. PHP后端生成隐藏字段（最稳妥） #

在页面渲染时，从当前URL的GET参数中提取次要变量，生成隐藏输入框放入表单，提交时就会自动携带该变量：

<?php
// 安全获取当前次要变量，为空则设默认值
$secondary_val = isset($_GET['secondary_variable']) ? $_GET['secondary_variable'] : '';
// 同步保留搜索关键词
$search_val = isset($_GET['search']) ? $_GET['search'] : '';
?>

<form action="search.php" method="get">
  <input type="text" name="search" value="<?php echo htmlspecialchars($search_val); ?>">
  <!-- 隐藏字段存储次要变量，提交时自动携带 -->
  <input type="hidden" name="secondary_variable" value="<?php echo htmlspecialchars($secondary_val); ?>">
  <button type="submit">搜索</button>
</form>

说明：用htmlspecialchars转义输出内容，避免XSS攻击；如果需要保留多个次要参数，可以循环遍历$_GET中除search外的字段批量生成隐藏输入框。

2. HTML静态添加隐藏字段（固定筛选场景） #

如果次要变量是固定值（比如固定分类筛选），直接在表单中硬编码隐藏字段即可：

<form action="search.php" method="get">
  <input type="text" name="search" value="example">
  <input type="hidden" name="secondary_variable" value="1">
  <button type="submit">搜索</button>
</form>

3. JavaScript动态追加参数（前端动态场景） #

通过JS解析当前URL的参数，在表单提交时动态插入隐藏字段或修改action属性：

方式1：动态插入隐藏字段 #

<form id="searchForm" action="search.php" method="get">
  <input type="text" name="search" value="example">
  <button type="submit">搜索</button>
</form>

<script>
const searchForm = document.getElementById('searchForm');
searchForm.addEventListener('submit', function(e) {
  const urlParams = new URLSearchParams(window.location.search);
  const secondaryVar = urlParams.get('secondary_variable');
  
  if (secondaryVar) {
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'secondary_variable';
    hiddenInput.value = secondaryVar;
    searchForm.appendChild(hiddenInput);
  }
});
</script>

方式2：修改表单action属性 #

searchForm.addEventListener('submit', function(e) {
  const urlParams = new URLSearchParams(window.location.search);
  const secondaryVar = urlParams.get('secondary_variable');
  
  if (secondaryVar) {
    const actionUrl = new URL(searchForm.action);
    actionUrl.searchParams.set('secondary_variable', secondaryVar);
    searchForm.action = actionUrl.toString();
  }
});

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