Creating a more dynamic calculator

I’ve got a very basic calculator that takes a users input and calculates it into MBs - then takes that total and calculates it in GBs - then based on the usage information it suggests a plan based on usage.

I have a few questions regarding PHP…

How do I have it not show a plan until after the calculation? ALSO, I’ve noticed that it stores the values until a new one has been entered. I want the values to disappear completely after a user hits reset (and also have the plan go away) I know this is possible, but I’m not advanced enough to know how to do it.

Here’s my code


<?php

// variables 

 $email = $_POST["email"];
 $webpages = $_POST['webpages'];
 $music = $_POST['music'];
 $videos = $_POST['videos'];
 $photos = $_POST['photos'];
 $totalEmail = $email * .00973;
 $totalWebpages = $webpages * .39726666667;
 $totalMusic = $music * 20;
 $totalVideos = $videos * 100;
 $totalPhotos = $photos * 30;
 $totalAmount = $totalEmail + $totalWebpages + $totalMusic + $totalVideos + $totalPhotos;
 $totalGigs = $totalAmount / 1024;
 
?>



<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="form">
	<form name="datacalc" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		How many emails do you send per month?<input type="text" name="email"/><p><?php echo  $totalEmail . ' MB/month'?></p>
		<div class="slider"></div>
		How many web pages do you access per month?<input type="text" name="webpages" /><p><?php echo  $totalWebpages . ' MB/month'?></p>
		<div class="slider"></div>
		How much time (in minutes) do you spend streaming music per month?<input type="text" name="music"/><p><?php echo  $totalMusic . ' MB/month'?></p>
		<div class="slider"></div>
		How much time do you spend streaming videos per month?<input type="text" name="videos"/><p><?php echo  $totalVideos. ' MB/month'?></p>
		<div class="slider"></div>
		How many photos do you upload per month?<input type="text" name="photos"/><p><?php echo  $totalPhotos . ' MB/month'?></p>
		<div class="slider"></div>
		<input type="submit"/>
		<input type="reset"/>
	</form>
	
	<p>Your total data usage in megabytes is <?php echo $totalAmount . ' MB/month'?></p>
	<p>Your total data usage in gigabytes is <?php echo $totalGigs . ' GB/month?' ?></p>
	
	<h2>Data Plan Suggestion</h2>
	<?
	// data plan suggestion

	if ($totalAmount <= 200) {
		echo '<strong>Impulse - $15 (200MB)</strong><br/>
		<ul>
		<li> Send/Receive 1,000 emails with no attachments*</li>
		<li> Send/Recieve 150 emails with attachments*</li>
		<li> View 400 web pages*</li>
		<li> Post 50 photos to social media sites*</li>
		<li> Watch 20 minutes of streaming video*</li>
		</ul>';
	} 		elseif ($totalAmount >= 201 && $totalAmount <= 1024) {
				echo '<strong>Amplify - $20 (1 GB)</strong><br/>
				Do everything the $15 plan does, but Amp it up 5 times for only $5 more!';
	} 		elseif ($totalAmount >= 1025 ){
				echo '<strong>Extreme - $29.99 (5 GB)</strong><br/>
				Finally.. get it all with 5GB of Extreme Data!';	
	}

	?>
</div> 


</body>
</html>

the div class slider is just placement until I eventually have that input as a jquery slider (if thats even possible)