A simple number manipulation and validation example.
<form action="javascript:void(calculate())"> <table> <tr><td colspan="2"><h1>Tip Calculator</h1></td></tr> <tr><td style="text-align:right">Amount $ </td><td style="text-align:left"> <input type="text" id="amount" size="20" placeholder="24.35" pattern="^\d*(\.\d{2}$)?" title="CURRENCY NUMBER, 2 DECIMAL PLACES (ie: 12.34)" required /></td></tr> <tr><td style="text-align:right">Tip % </td><td style="text-align:left"> <input type="text" id="tip" size="20" placeholder="15" pattern="\d*" title="WHOLE NUMBER, NO DECIMALS (ie: 15)" required /></td></tr> <tr><td style="text-align:center" colspan="2"><hr/></td></tr> <tr><td style="text-align:right">Total $ </td><td style="text-align:left"> <strong id="total">---</strong></td></tr> <tr><td style="text-align:center" colspan="2"><hr/></td></tr> <tr><td style="text-align:center" colspan="2"><input type="submit" value="Calculate Tip Amount" class="button" /></td></tr> <tr><td style="text-align:center" colspan="2"><span id="error"></span></td></tr> </table> </form> <script type="text/javascript"> var amount = document.getElementById("amount"); var tip = document.getElementById("tip"); var total = document.getElementById("total"); function calculate() { var a = parseFloat(amount.value); var t = parseInt(tip.value) / 100; total.innerHTML = ((a*t)+a).toFixed(2); console.log("Amount : $" + a + "\nTip : " + (t*100) + "%\nTip Amount : $" + (a*t) + "\nTotal Bill : $" + ((a*t)+a)); }; </script>DEMO | DOWNLOAD