I have a working form with many variables and I need an option for one or two applicants the solution I am working on is to have the HTML fields hidden for the second applicant until a checkbox is ticked. I have the hide and show working on the first page and I've got the checkbox state set up as a variable in the PHP but I can't figure out how to get the PHP variable on the next pages to automatically trigger the second applicant fields. With past things I've tried looking in the dev tools on chrome its telling me the variable is returning empty however if I use the same variable on the same page in the HTML not the JavaScript it clearly shows ad "on".
The latest thing I'm trying is to convert the variable to JSON but still no luck.
<!DOCTYPE html>
<html>
<body>
<!-- p elements only for testing to see outputs -->
<p id="test"> <?php echo $twoapplicants ?></p>
<p id="test2"></p>
<!-- something to look at after endless page refreshs -->
<h2>Two Applicants Test Page</h2>
<!-- Hidden untill Toggleextrafields() is triggered fields need to be present on page but only showed if a variable from the previous page is "on" -->
<p class="extrafields" style="display:none">now you see me</p>
<script>
//$twoapplicants defined as on on another page in a PHP run multipage form
<?php
$twoapplicants = "on";
?>
//test for value set on previous page on page load
window.onload = pageload();
// trigger Toggleextrafields if variable is equal to "on"
function pageload(){
var a =<?php echo json_encode($twoapplicants); ?>;
var b = JSON.parse(a);
document.write (b);
document.getElementById('test2').innerHTML = b;
if(b === "on"){
Toggleextrafields();
}
else {extrafieldsoff();
}
}
// toggle extra fields and make them visible if they aren't already (this already works)
function Toggleextrafields() {
var x = document.getElementsByClassName("extrafields");
var i;
for (i = 0; i < x.length; i++){
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display= "block";
}
}
}
// hides extra fields if they aren't hidden already and the trigger isn't there
function extrafieldsoff() {
var x = document.getElementsByClassName("extrafields");
{
x.style.display = "none";
}
}
</script>
</body>
</html>