I am trying to create a simple php calculator with swich case statement. I used bootstrap buttons to each +,-,*,/ functions. At the end when user fill the form and press any of these buttons it is supposed to display the results in a disabled text field. But it won't display the results
<!DOCTYPE html>
<html>
<head>
<title>SIMPLE CALCULATOR</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid mainbox row">
<h2 style="text-align: center;">Calculator</h2>
<div class="container-fluid calbox col-md-4 offset-md-4">
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label style="padding-top: 10px;">Value 1</label>
<input type="text" class="form-control" placeholder="Value 1" name="val1" id="val1">
</div>
<div class="form-group">
<label>Value 2</label>
<input type="text" class="form-control" placeholder="Value 2" name="val2" id="val2">
</div>
<div class="form-group row" style="padding-left: 10px;">
<button type="submit" class="btn btn-outline-primary" name="btn" value="add">+</button>
<button type="submit" class="btn btn-outline-primary" name="btn" value="sub">-</button>
<button type="submit" class="btn btn-outline-primary" name="btn" value="mul">*</button>
<button type="submit" class="btn btn-outline-primary" name="btn" value="div">/</button>
</div>
<div class="form-group">
<label>Result</label>
<input type="text" class="form-control" name="res" value="<?php cal() ?>" disabled>
</div>
</form>
</div>
</div>
<?php
function cal(){
if (isset($_POST['submit'])) {
$val1 = $_POST['val1'];
$val2 = $_POST['val2'];
$func = $_POST['btn'];
switch ($func) {
case "add":
$compute = $val1 + $val2;
break;
case "sub":
$compute = $val1 - $val2;
break;
case "mul":
$compute = $val1 * $val2;
break;
case "div":
$compute = $val1 / $val2;
break;
default:
$compute = "error";
break;
}
return $compute;
}
}
?>
<script type="text/javascript" src="js/jquery311.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Give some tips to determine the problem
