PHP多页表单如何将前页PHP变量传递到后续页面的JavaScript触发字段显隐

存在的问题&修复方案 #

1. 跨页PHP变量传递问题

PHP变量默认是单页面生效的，你第一页存储的复选框状态无法自动传递到后续页面，需要先通过以下任意一种方式实现跨页传值：

• 方案1：第一页表单添加隐藏字段，提交时把复选框值通过POST/GET请求传给下一页
• 方案2：把值存入$_SESSION（需要在所有相关页面顶部先执行session_start()开启会话）
• 方案3：通过URL参数拼接传递状态值
  确认后续页面能正确获取到$twoapplicants的值后，再修复JS逻辑的问题。

2. JS逻辑错误修复

你的代码里共有3处明显的语法/逻辑错误，修复后的完整代码如下：

<!DOCTYPE html>
<html>
<body>
<!-- 用SESSION传值需要先开启会话，用POST/GET传值可省略这行 -->
<?php session_start(); $twoapplicants = $_SESSION['twoapplicants'] ?? ''; ?>

<!-- 测试用输出元素 -->
<p id="test"> <?php echo $twoapplicants ?></p>
<p id="test2"></p>

<h2>双申请人测试页</h2>

<p class="extrafields" style="display:none">第二位申请人字段</p>

<script>
// 页面加载完成后执行初始化函数，注意不要加括号，加括号会直接执行函数并把返回值绑定给onload
window.onload = pageload;

function pageload(){
  // json_encode输出的已经是合法JS字面量，直接赋值即可，不需要额外JSON.parse
  var b = <?php echo json_encode($twoapplicants); ?>;
  document.getElementById('test2').innerHTML = b;
  if(b === "on"){
    Toggleextrafields();
  } else {
    extrafieldsoff();
  }
}

function Toggleextrafields() {
  var x = document.getElementsByClassName("extrafields");
  var i;
  for (i = 0; i < x.length; i++){
    x[i].style.display = x[i].style.display === "block" ? "none" : "block";
  }
}

function extrafieldsoff() {
  var x = document.getElementsByClassName("extrafields");
  var i;
  // getElementsByClassName返回的是类数组集合，需要遍历每个元素修改样式
  for (i = 0; i < x.length; i++){
    x[i].style.display = "none";
  }
}
</script>
</body>
</html>

额外注意事项 #

• 删掉了原代码里的document.write，页面加载完成后调用这个方法会清空整个页面内容
• 用POST传值时，后续页面取值写$twoapplicants = $_POST['你的复选框name属性'] ?? '';即可
• 用GET传值时，后续页面取值写$twoapplicants = $_GET['你的复选框name属性'] ?? '';即可

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