How to select and use multiple formulae in the drop-down of form in PHP

In this tutorial, we will practice the code of using/selecting multiple formulae in the drop down of form as shown below in the figure.

<?php
$result=0;
$head=0;
$velocity=0;
$coefficient=0;
 $gravity= 9.8;
if(isset($_POST["submit"]))
{
	$head=$_POST["head"];
	$coefficient=$_POST["coefficient"];
	$velocity=$_POST["velocity"];
	if($head==0)
{
	$head=1;
}
if($coefficient==0)
{
	$coefficient=1;
}
if($velocity==0)
{
	$velocity=1;
}
	$select_option=$_POST["select_option"];

		if($select_option=="head_Loss")
		{
			$v=pow($velocity,2);
			$x=$v/(2*$gravity);
			$head=$coefficient*$x;	
		}
		elseif($select_option=="velocity")
		{
				$x=2*$gravity*$head;
				$result=$x/$coefficient;
				$velocity=sqrt($result);	
		}
		elseif ($select_option=="coefficient") {
				$x=(2*$gravity)/pow($velocity,2);
				$coefficient=$head*$x;
		}

}
unset($_POST["submit"]);
?>
<html>
<head>
	<title>Minor Losses Calculator</title>
	<style>
		body{
		background-color:white;
 		height: 100%;
    	background-image: linear-gradient(to bottom,#006600,#006600 1%, white 40%);

			}
	h1{
	
  		color: white;
  		text-align:center;}
 	</style>
</head>
<body>
		<br>
	<br>
	<br>
	<br>
	<br>
		<h1>Minor Losses Calculation</h1>

	<form method="POST" action="#">
<table cellpadding="2" cellpadding="2" align ='center' style="border:double #333333; vertical-align:bottom"; >

	 <tr>
	 	<td><b>I want to calculate </b></td>
	 	<td><select name="select_option" id="select_option" onChange="val()">
	 		<option value="head_Loss">Head Loss (HL)</option>
	 		<option value="velocity">Velocity (v)</option>
	 		<option value="coefficient">Closed Conduits Energy Loss Coefficient(K)</option>
	 	</select></td>
	 </tr>
	 <tr>
	 	<td><b>Velocity = </b></td>
	 	<td><input type="text" id="velocity" name="velocity" value="<?php echo $velocity ?>" ><b>m/s</b></td>
	 
	 </tr>
	  <tr>
	 	<td><b>Closed Conduits Energy Loss Coefficient(K) = </b></td>
	 	<td><input type="text" id="coefficient" value="<?php echo $coefficient?>" name="coefficient"></td>
	 </tr>
	  <tr>
	 	<td><b>Head Loss(H<sub>L</sub>) = </b> </td>
	 	<td><input type="text" readonly="yes" id="head" value="<?php echo $head?>" name="head"><b>m</b></td>
	 	
	 </tr>
	 <tr>
		<td>
		</td>
	</tr>
	  <tr>
	  	<td><input type="button" onclick="resetval()" value="Reset" name="reset" value="Reset" style="font-size:12pt; text-align: center; color:white; cursor: pointer; background-color:black ;border:#336600;padding:5px 20px;><font color='"white"'></font></td>
	 	<td><input type="submit" name="submit" style="font-size:16px; text-align: center; color:white; cursor: pointer; background-color:#006600; border:black; padding:5px 80px; > <font color: '"white" '></font></td>
	 
	 </tr>
</table>
</form>
<script type="text/javascript">

function val() {
    d = document.getElementById("select_option").value;
    	if(d=="head_Loss")
    	{
    		document.getElementById("head").readOnly=true;	
    		document.getElementById("velocity").readOnly=false;	
    		document.getElementById("coefficient").readOnly=false;	

    	}
    	else if(d=="velocity")
    	{
     		document.getElementById("head").readOnly=false;	
    		document.getElementById("velocity").readOnly=true;	
    		document.getElementById("coefficient").readOnly=false;	

    	}
    	else if (d=="coefficient") 
    	{
    			document.getElementById("head").readOnly=false;	
    		document.getElementById("velocity").readOnly=false;	
    		document.getElementById("coefficient").readOnly=true;	
    	}

}


	function resetval()
	{

		document.getElementById("head").value=null;
				document.getElementById("velocity").value=null;
				document.getElementById("coefficient").value=null;

	}
</script>
<p><h3>&nbsp;</h3>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<?php

$result=0;

$head=0;

$velocity=0;

$coefficient=0;

$gravity= 9.8;

if(isset($_POST["submit"]))

{

$head=$_POST["head"];

$coefficient=$_POST["coefficient"];

$velocity=$_POST["velocity"];

if($head==0)

{

$head=1;

}

if($coefficient==0)

{

$coefficient=1;

}

if($velocity==0)

{

$velocity=1;

}

$select_option=$_POST["select_option"];

if($select_option=="head_Loss")

{

$v=pow($velocity,2);

$x=$v/(2*$gravity);

$head=$coefficient*$x;

}

elseif($select_option=="velocity")

{

$x=2*$gravity*$head;

$result=$x/$coefficient;

$velocity=sqrt($result);

}

elseif ($select_option=="coefficient") {

$x=(2*$gravity)/pow($velocity,2);

$coefficient=$head*$x;

}

unset($_POST["submit"]);

<html>

<head>

<title>Minor Losses Calculator</title>

<style>

body{

background-color:white;

height: 100%;

background-image: linear-gradient(to bottom,#006600,#006600 1%, white 40%);

}

h1{

color: white;

text-align:center;}

</style>

</head>

<body>

<br>

<h1>Minor Losses Calculation</h1>

<tr>

<td><b>I want to calculate </b></td>

<option value="velocity">Velocity (v)</option>

<option value="coefficient">Closed Conduits Energy Loss Coefficient(K)</option>

</select></td>

</tr>

<tr>

<td><b>Velocity = </b></td>

</tr>

<tr>

<td><b>Closed Conduits Energy Loss Coefficient(K) = </b></td>

<td><input type="text" id="coefficient" value="<?php echo $coefficient?>" name="coefficient"></td>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</tr>

</table>

</form>

function val() {

d = document.getElementById("select_option").value;

if(d=="head_Loss")

{

document.getElementById("head").readOnly=true;

document.getElementById("velocity").readOnly=false;

document.getElementById("coefficient").readOnly=false;

}

else if(d=="velocity")

{

document.getElementById("head").readOnly=false;

document.getElementById("velocity").readOnly=true;

document.getElementById("coefficient").readOnly=false;

}

else if (d=="coefficient")

{

document.getElementById("head").readOnly=false;

document.getElementById("velocity").readOnly=false;

document.getElementById("coefficient").readOnly=true;

}

function resetval()

{

document.getElementById("head").value=null;

document.getElementById("velocity").value=null;

document.getElementById("coefficient").value=null;

}

</script>

</body>

</html>