I have a PHP project containing textboxes to visualize STACK data structure concept; as seen in the screenshot below:
I am passing PHP values to JavaScript function and adding value only to the index number where there is no value (i.e Top of stack)
Below is the code:
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Structure Visualization</title>
<link rel=stylesheet href=StackStyleSheet.css>
<script type="text/javascript">
function addElement($id, $value)
{
var id = $id;
var value = $value;
//correct id and value is passed here.
var textbox = document.getElementById(id);
//this LOC does not execute and returns to the php code
textbox.value = value;
}
</script>
<body>
<?php include 'header.php'; ?>
<form method="POST" action="">
<div id ="container">
<div id="top">
<h3>STACK (ARRAY IMPLEMENTATION)</h3>
</div>
<div id="bottom">
<input id="inputBox" type="text" name="inputNumber" value="">
<button id="pushButton" type="submit" class="button button1" name = "PUSH">Push</button>
<button id="popButton" type="submit" class="button button2" name = "POP">Pop</button>
<button id="clearButton" type="submit" class="button button3" name = "CLEAR">Clear Stack</button>
</div>
<div id="operation">
<input type="text" name="5E" value="" class="operation1 obutton6">
<input type="text" name="4E" value="" class="operation1 obutton5">
<input type="text" name="3E" value="" class="operation1 obutton4">
<input type="text" name="2E" value="" class="operation1 obutton3">
<input type="text" name="1E" value="" class="operation1 obutton2">
<input type="text" name="0E" value="" class="operation1 obutton1">
</div>
</div>
</form>
<?php
include 'footer.php';
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['PUSH']))
{
$val0E = (int)$_POST['0E'];
$val1E = (int)$_POST['1E'];
$val2E = (int)$_POST['2E'];
$val3E = (int)$_POST['3E'];
$val4E = (int)$_POST['4E'];
$val5E = (int)$_POST['5E'];
//creating an associative array to store/add/delete values in the index locations
$elementsindex = array("0E"=>$val0E ,"1E"=>$val1E,"2E"=>$val2E, "3E"=>$val3E, "4E"=>$val4E, "5E"=>$val5E);
foreach ($elementsindex as $key => $value)
{
if(($elementsindex[$key])==null)
{
//value copied from textbox
$id = $key;
$value = $_POST['inputNumber'];
//value pushed in
$elementsindex[$key] = $value; //saves value against element index
//value reflected on screen box
echo '<script type="text/javascript">';
echo 'addElement("'.$id.'", "'.$value.'");';
echo '</script>';
break;
}
else if(($elementsindex[$key])!=null)
{
continue;
}
}
}
}
</body>
</html>
In the foreach loop, if the value at bottom index i.e index = 0E is null/zero, then a new value is added to it, after which we exit from the loop using break;
But, at the JavaScript function addElement(), the following code does not execute and immediately returns and no value is filled in the textbox.
var textbox = document.getElementById(id);
//this LOC does not execute and returns to the php code
textbox.value = value;
Where is the code wrong?
