<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculating example</title>
<script>
function get_quantity() {
var quantity = +document.recipe.quantity.value;
var numberofegg = 0;
var amountofsalt = 0;
var eggPerOmelette = 2;
var saltPerOmelette = 50;
numberofegg = quantity * eggPerOmelette;
amountofsalt = quantity * saltPerOmelette;
document.getElementById('numberofegg').value = numberofegg;
document.getElementById('amountofsalt').value = amountofsalt;
}
</script>
</head>
<body>
<form name="recipe">
<table border="1">
<tr>
<th colspan="3"><em>Omelette Recipe</em></th>
</tr>
<tr>
<th colspan="2"><em> Number of Omelete you want to make</em></th>
<td colspan="2"><input type="text" name="quantity" id="quantity" maxlength="100"/></td>
</tr>
<tr>
<th>Ingredients</th>
<th>Quantity Per Omelette</th>
<th>Quantity you need </th>
</tr>
<tr>
<td>Egg</td>
<td>2</td>
<td colspan="2"><input type="text" name="numberofegg" id="numberofegg" readonly="readonly" maxlength="100"/></td>
</tr>
<tr>
<td>Salt</td>
<td>50</td>
<td colspan="2"><input type="text" name="amountofsalt" id="amountofsalt" readonly="readonly" maxlength="100"/></td>
</tr>
<tr>
<td><input type="button" value="Calculate" onclick="get_quantity()"/></td>
</tr>
</table>
</form>
</body>
</html>