提交不同职位申请表单时如何获取对应参考编号并在apply.html只读展示

下面分两种常用实现方式，你可以根据需求选择：

方式1：URL查询参数传递（实现最简单，兼容性好） #

核心逻辑：通过GET提交表单把职位编号带到跳转后的URL，再在apply.html中解析参数填入输入框。

第一步：修改原职位列表页代码 #

给每个表单新增隐藏的职位编号字段，提交方式改为GET：

<!-- 第一个职位表单 -->
<form action="apply.html" method="get">
  <div class="cloudinformation">
    <h2>Job reference number:</h2>
    <h4>1FN43</h4>
    <!-- 新增隐藏字段存职位编号 -->
    <input type="hidden" name="job_ref" value="1FN43">
    <input type="submit" value="Apply">
  </div>
</form>

<!-- 第二个职位表单 -->
<form action="apply.html" method="get">
  <div class="consultantinformation">
    <h2>Job reference number:</h2>
    <h4>6LZ9W</h4>
    <!-- 新增隐藏字段存职位编号 -->
    <input type="hidden" name="job_ref" value="6LZ9W">
    <input type="submit" value="Apply">
  </div>
</form>

第二步：修改apply.html代码 #

新增JS逻辑解析URL参数，填入输入框并设置只读：

<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
  <label>Job Reference Number:</label>
  <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
</form>

<script>
// 解析URL参数
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

const jobRef = getQueryParam('job_ref');
if (jobRef) {
  const input = document.getElementById('onlyletters');
  input.value = jobRef;
  // 设置只读，禁止用户修改
  input.setAttribute('readonly', true);
}
</script>

方式2：sessionStorage存储（参数不暴露在URL地址栏） #

核心逻辑：点击Apply按钮时先把职位编号存入浏览器临时存储，跳转后读取赋值。

第一步：修改原职位列表页代码 #

给Apply按钮绑定点击事件存值，再触发跳转：

<!-- 第一个职位表单 -->
<form action="apply.html" method="post">
  <div class="cloudinformation">
    <h2>Job reference number:</h2>
    <h4>1FN43</h4>
    <input type="submit" value="Apply" onclick="sessionStorage.setItem('job_ref', '1FN43')">
  </div>
</form>

<!-- 第二个职位表单 -->
<form action="apply.html" method="post">
  <div class="consultantinformation">
    <h2>Job reference number:</h2>
    <h4>6LZ9W</h4>
    <input type="submit" value="Apply" onclick="sessionStorage.setItem('job_ref', '6LZ9W')">
  </div>
</form>

第二步：修改apply.html代码 #

从sessionStorage读取值填入输入框并设置只读：

<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
  <label>Job Reference Number:</label>
  <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
</form>

<script>
const jobRef = sessionStorage.getItem('job_ref');
if (jobRef) {
  const input = document.getElementById('onlyletters');
  input.value = jobRef;
  input.setAttribute('readonly', true);
  // 可选：用完清空存储
  sessionStorage.removeItem('job_ref');
}
</script>

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