I have two different pages for my site, lets call them page1 and page2. On the first page I have a HTML form of which handles some information. Then I have a php document to process that information into a .txt file. Then I have an image on my page2, this image I would like to change depending on a specific variable. This variable is set in the php script, where it checks if a certain value is right then it will set this specific variable to either 1 or 2. Then as said on page2 I have this image I would like to change depending on whether the php variable is 1 or 2. This I am trying to do by getting the php variable through javascript on page2 and then displaying it first to make sure I am getting the right values. But when doing this I just get "null" and pretty much nothing really happens. It loads the page but doesn't display anything. Keep in mind when I am saying pages etc it is because the page1 is one HTML document, page2 is another HTML document and then of course the php function is a separate php document.
HTML page1 where the user would pick from a drop down menu
<div id="sKind">
<select border="0" size="1" name="produKind" id="cSK" data-selected="" required="">
<option value="">enter color</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
</div>
php file I am using to pass values and variables
<?php
$field_skind = $_POST['produKind'];
$imgShow = 1;
if ($field_skind == white){
$imgShow = 1;
} else if ($field_skind == black) {
$imgShow = 2;
}
echo json_encode($imgShow);
?>
Code I am using on page2 html
<script>
var imgNumber = <?php echo json_encode($imgShow)?>;
document.getElementById("insert").innerHTML = imgNumber;
</script>
<p id="insert"></p>