点击Unlock按钮后将输入值追加至href的churchId参数后问题求助

你的问题在于原代码里的链接是静态写死的，没法自动获取输入框的内容并拼接。下面给两种可行的解决方式：

方式一：用JavaScript动态拼接跳转 #

把按钮从<a>标签里分离出来，通过JS监听点击事件，获取输入值后拼接完整URL再跳转：

<body> 
  <label for="number">Number:</label><br>
  <input type="text" id="number"><br><br>
  
  <button id="unlockBtn">Unlock</button>

  <script>
    // 获取按钮和输入框元素
    const unlockBtn = document.getElementById('unlockBtn');
    const numberInput = document.getElementById('number');

    // 给按钮绑定点击事件
    unlockBtn.addEventListener('click', function() {
      const churchId = numberInput.value.trim();
      // 先检查是否输入了内容
      if (churchId) {
        // 拼接完整URL，用encodeURIComponent处理特殊字符避免出错
        const fullUrl = `https://afiliaciones.ajecpr.com/api/unsubmit?fiscalYear=2023&churchId=${encodeURIComponent(churchId)}`;
        // 跳转页面
        window.location.href = fullUrl;
      } else {
        // 可选：提示用户输入内容
        alert('请输入数字');
      }
    });
  </script>
</body>
</html>

方式二：用表单自动拼接参数 #

如果不需要额外逻辑，用GET表单更简单，浏览器会自动把表单字段拼到URL里：

<body> 
  <!-- 表单action设为基础接口地址，method用GET -->
  <form id="unlockForm" action="https://afiliaciones.ajecpr.com/api/unsubmit" method="GET">
    <label for="number">Number:</label><br>
    <!-- 输入框name设为churchId，对应URL参数名 -->
    <input type="text" id="number" name="churchId"><br><br>
    <!-- 把固定的fiscalYear设为隐藏字段 -->
    <input type="hidden" name="fiscalYear" value="2023">
    <!-- 提交按钮 -->
    <button type="submit">Unlock</button>
  </form>
</body>
</html>

两种方式选哪种都行：第一种适合需要加验证、格式处理等额外逻辑的场景；第二种代码更简洁，适合纯参数拼接的需求。

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