Tip Calculator

Introduction | Demonstration Calculator | Source Code

How The Tip Calculator Works

This is a simple calculator for calculating a tip and splitting the bill between several people. Enter in the amount of the bill, the tip percentage, and the number of people paying. Then click ”Calculate” to get your results.

If you change the values, click the “Calculate” button again to get a new result.

Introduction | Demonstration Calculator | Source Code

Demonstration Calculator

Tip Calculator

Bill Amount:

Number of People:

Tip Percentage:

Tip Per Person:

Total Per Person:

Full Amount:

Introduction | Demonstration Calculator | Source Code

Tip Calculator Source Code

This calculator is licensed to you under Creative Commons Attribution 3.0. If you would like to use the source code on your site or create a derivative work from it, you must include the following HTML on the page where the calculator appears. We’re giving you this code for free with a legal license to use it. All you have to do is credit us in the manner we specify.

Required Credit HTML


Just cut and paste the Javascript code and HTML form below into your page. If you want to customize the appearance of the form, feel free. Just make sure the input name and form id/name values are not changed.

<script type="text/javascript">

function calcTip() {

var formvals = getFormVal();

var totalPeople = formvals[0];

var percentageTotal = formvals[1];

var billAmount = formvals[2];

//tip per person

var total = ((billAmount * percentageTotal) * .01) / totalPeople;

total = Math.round(total * 100) / 100;

total = total.toFixed(2);

//total per person

var totalPerson = ((total * totalPeople) + billAmount) / totalPeople;

totalPerson = Math.round(totalPerson * 100) / 100;

totalPerson = totalPerson.toFixed(2);

//full amount due

var fullAmount = ((total * totalPeople) + billAmount);

fullAmount = Math.round(fullAmount * 100) / 100;

fullAmount = fullAmount.toFixed(2);
document.getElementById("tip").innerHTML = "$"+total;	

document.getElementById("totp").innerHTML = "$"+totalPerson;

document.getElementById("fa").innerHTML = "$"+fullAmount;


function getFormVal(){
        var totalPeople = parseInt(document.wcbubba.people.value);

        var billAmount = parseInt(document.wcbubba.bill.value);

        var percentageTotal = parseFloat(document.wcbubba.percentage.value);

        if((totalPeople <= 0)||(isNaN(totalPeople))) totalPeople = 1;

        if((percentageTotal <= 0)||(isNaN(percentageTotal))) percentageTotal = 1;

        if((billAmount <= 0)||(isNaN(billAmount))) billAmount = 1;

        var mike = new Array(totalPeople,percentageTotal,billAmount);

       return mike;



<form id="wcbubba" name="wcbubba" action="javascript:void();">

Bill Amount: <input type=text name="bill" size=8>

Number of People: <input type=text name="people" size=8>

Tip Percentage: <input type=text name="percentage" size=8>

<br /><br />

<input type="submit" value="calculate" onClick="calcTip();"> 

<br /><br />


<p><b>Tip Per Person:</b> <span id="tip"></p><br />

<p><b>Total Per Person:</b> <span id="totp"></p><br />

<p><b>Full Amount:</b> <span id="fa"></p><br />

Leave a Reply