You can host your own copy of WEBcalc on your website by copying the code below into one of your pages, simply cut and paste the Java script and form code into your HTML editor.
Scripts
<script type="text/javascript">
function formatCurrency (Val, Sign) {
Val=""+Val;
if (Val.indexOf (".", 0)!=-1) {
Dollars = Val.substring(0, Val.indexOf (".", 0));
Cents = Val.substring(Val.indexOf (".", 0)+1, Val.indexOf (".", 0)+3);
if (Cents.length==0) Cents="00";
if (Cents.length==1) Cents=Cents+"0";
} else {
Dollars = Val;
Cents = "00";
}
OutString="";
len=Dollars.length;
if (len>=3) {
while (len>0) {
TempString=Dollars.substring(len-3, len)
if (TempString.length==3) {
OutString=","+TempString+OutString
len=len-3; } else {
OutString=TempString+OutString
len=0
}
}
if (OutString.substring(0, 1)==",")
Dollars=OutString.substring (1, OutString.length)
else
Dollars=OutString
}
if (Sign) return ("£"+Dollars+"."+Cents);
else return (Dollars+"."+Cents);
}
function isPayDate(){
if (document.form1.TaxPeriod.value != ''){
if (document.form1.Frequency.value == "Monthly" && document.form1.TaxPeriod.value == 2){
document.form1.PayDate.disabled=false;
if (document.form1.TaxYear.value == "05/06") {
document.form1.PayDate.value = "18/05/2005";
}
else if (document.form1.TaxYear.value == "06/07") {
document.form1.PayDate.value = "18/05/2006";
}
else if (document.form1.TaxYear.value == "07/08") {
document.form1.PayDate.value = "18/05/2007";
}
}
else {
document.form1.PayDate.disabled=true;
document.form1.PayDate.value = "";
}
}
}
function UpdateTaxCode() {
if (document.form1.TaxYear.value == "05/06") {
document.form1.TaxCode.value = "489L";
}
else if (document.form1.TaxYear.value == "06/07") {
document.form1.TaxCode.value = "503L";
}
else if (document.form1.TaxYear.value == "07/08") {
document.form1.TaxCode.value = "522L";
}
isPayDate();
}
function isWeeks() {
if (document.form1.Dir.value == "P") {
document.form1.Weeks.disabled=false;
document.form1.Weeks.focus;
}
else {
document.form1.Weeks.disabled=true;
}
}
function AddPayments() {
var PaymentsValue=''
if (document.form1.PamentValue1.value != '') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue1.value * 1);
}
if (document.form1.PamentValue2.value !='') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue2.value * 1);
}
if (document.form1.PamentValue3.value != '') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue3.value * 1);
}
if (document.form1.PamentValue4.value != '') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue4.value * 1);
}
if (document.form1.PamentValue5.value != '') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue5.value * 1);
}
if (document.form1.PamentValue6.value != '') {
PaymentsValue = (PaymentsValue * 1) + (document.form1.PamentValue6.value * 1);
}
if (PaymentsValue != '') {
document.form1.totalpayments.value="" + formatCurrency(PaymentsValue,true);
}
}
function AddeDuctions() {
var DeductionValue=''
if (document.form1.deductionValue1.value != '') {
DeductionValue = (DeductionValue * 1) + (document.form1.deductionValue1.value * 1);
}
if (document.form1.deductionValue2.value != '') {
DeductionValue = (DeductionValue * 1) + (document.form1.deductionValue2.value * 1);
}
if (document.form1.deductionValue3.value != '') {
DeductionValue = (DeductionValue * 1) + (document.form1.deductionValue3.value * 1);
}
if (document.form1.deductionValue4.value != '') {
DeductionValue = (DeductionValue * 1) + (document.form1.deductionValue4.value * 1);
}
if (DeductionValue != '') {
document.form1.totalDeductions.value="" + formatCurrency(DeductionValue,true);
}
}
</script>
Form
<form name="form1" method="post" action="http://payesoft.servehttp.com/webcalc/webcalc.ASP" target="_blank">
<!-- <form name="form1" method="post" action="../webcalc/webcalc.ASP" target="_blank">-->
<table border="0" cellspacing="0" >
<tr>
<td valign="bottom"> </td>
<td width="250" height="39" valign="bottom" class="capsule"> <div align="left" class="style9"><strong><span class="style5">Frequency</span><br>
</strong>
<select name="Frequency" id="select6" onChange="isPayDate()">
<option value="Monthly">Monthly</option>
<option value="Weekly">Weekly</option>
<option value="Fortnightly">Fortnightly</option>
<option value="Lunar">Lunar</option>
</select>
</div></td>
<td valign="bottom"> </td>
<td colspan="5" rowspan="13" valign="top"><div align="center">
<table width="100%" height="168" border="0" cellspacing="1" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr bgcolor="#0000FF">
<td width="43%" height="19" bgcolor="#0066BC"><div align="left"><font color="#FFFFFF"><strong>Payments</strong></font></div></td>
<td width="35%" bgcolor="#0066BC"><div align="right"><font color="#FFFFFF"><strong>£
Value</strong></font></div></td>
<td width="9%" bgcolor="#0066BC"><div align="center"><font color="#FFFFFF"><strong>T</strong></font></div></td>
<td width="9%" bgcolor="#0066BC"><div align="center"><font color="#FFFFFF"><strong>N</strong></font></div></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle1" type="text"id="PaymentTitle1" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue1" type="text" id="PamentValue1" onKeyUp="AddPayments()" size="13" maxlength="13" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable1" type="checkbox" id="pTaxable1" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable1" type="checkbox" id="pNIable1" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle2" type="text" id="PaymentTitle2" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue2" type="text" id="PamentValue2" size="13" maxlength="13" onKeyUp="AddPayments()" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable2" type="checkbox" id="pTaxable2" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable2" type="checkbox" id="pNIable2" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle3" type="text" id="PaymentTitle3" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue3" type="text" id="PamentValue3" size="13" maxlength="13" onKeyUp="AddPayments()" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable3" type="checkbox" id="pTaxable3" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable3" type="checkbox" id="pNIable3" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle4" type="text" id="PaymentTitle4" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue4" type="text" id="PamentValue4" size="13" maxlength="3" onKeyUp="AddPayments()" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable4" type="checkbox" id="pTaxable4" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable4" type="checkbox" id="pNIable4" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle5" type="text" id="PaymentTitle5" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue5" type="text" id="PamentValue5" size="13" maxlength="13" onKeyUp="AddPayments()" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable5" type="checkbox" id="pTaxable5" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable5" type="checkbox" id="pNIable5" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><input name="PaymentTitle6" type="text" id="PaymentTitle6" size="15" maxlength="20"></td>
<td height="20" bgcolor="#84939A"><input name="PamentValue6" type="text" id="PamentValue6" size="13" maxlength="13" onKeyUp="AddPayments()" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><input name="pTaxable6" type="checkbox" id="pTaxable6" value="checkbox" checked></td>
<td height="20" bgcolor="#84939A"><input name="pNIable6" type="checkbox" id="pNIable6" value="checkbox" checked></td>
</tr>
<tr>
<td height="20" bgcolor="#84939A"><span class="style6"><strong>Total
Payments</strong></span></td>
<td height="20" bgcolor="#84939A"><input name="totalpayments" type="text" readonly="true" id="totalpayments" size="13" maxlength="13" style="text-align: right"></td>
<td height="20" bgcolor="#84939A"><!--DWLayoutEmptyCell--> </td>
<td height="20" bgcolor="#84939A"><!--DWLayoutEmptyCell--> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr bgcolor="#0000FF">
<td width="43%" height="18" bgcolor="#0066BC"><font color="#FFFFFF"><strong>Deductions</strong></font></td>
<td bgcolor="#0066BC"><div align="right"><font color="#FFFFFF"><strong>£
Value</strong></font></div></td>
<td bgcolor="#0066BC"><div align="center"><font color="#FFFFFF"><strong>T</strong></font></div></td>
<td bgcolor="#0066BC"><div align="center"><font color="#FFFFFF"><strong>N</strong></font></div></td>
</tr>
<tr>
<td bgcolor="#84939A"><span class="style6"><strong>PAYE Tax</strong></span></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="tax" type="text" readonly="true" id="tax2" size="13" maxlength="13" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
</tr>
<tr>
<td bgcolor="#84939A"><span class="style6"><strong>National Int.</strong></span></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="ni" type="text" readonly="true" id="ni2" size="13" maxlength="13" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
</tr>
<tr>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionTitle1" type="text" id="deductionTitle12" size="15" maxlength="20">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionValue1" type="text" id="deductionValue12" size="13" maxlength="13" onKeyUp="AddeDuctions()" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dTaxable1" type="checkbox" id="dTaxable12" value="checkbox">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dNIable1" type="checkbox" id="dNIable12" value="checkbox">
</font></td>
</tr>
<tr>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionTitle2" type="text" id="deductionTitle22" size="15" maxlength="20">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionValue2" type="text" id="deductionValue22" size="13" maxlength="13" onKeyUp="AddeDuctions()" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dTaxable2" type="checkbox" id="dTaxable22" value="checkbox">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dNIable2" type="checkbox" id="dNIable22" value="checkbox">
</font></td>
</tr>
<tr>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionTitle3" type="text" id="deductionTitle32" size="15" maxlength="20">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionValue3" type="text" id="deductionValue32" size="13" maxlength="13" onKeyUp="AddeDuctions()" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dTaxable3" type="checkbox" id="dTaxable32" value="checkbox">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dNIable3" type="checkbox" id="dNIable32" value="checkbox">
</font></td>
</tr>
<tr>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionTitle4" type="text" id="deductionTitle42" size="15" maxlength="20">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="deductionValue4" type="text" id="deductionValue42" size="13" maxlength="13" onKeyUp="AddeDuctions()" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dTaxable4" type="checkbox" id="dTaxable42" value="checkbox">
</font></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="dNIable4" type="checkbox" id="dNIable42" value="checkbox">
</font></td>
</tr>
<tr>
<td bgcolor="#84939A"><span class="style6"><strong>Total Deductions</strong></span></td>
<td bgcolor="#84939A"><font color="#666666">
<input name="totalDeductions" type="text" readonly="true" id="totalDeductions2" size="13" maxlength="13" style="text-align: right">
</font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
<td bgcolor="#84939A"><font color="#666666"> </font></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr bgcolor="#0000FF">
<td width="43%" height="18" bgcolor="#0066BC"><div align="right"><font color="#FFFFFF"></font></div></td>
<td width="59%" bgcolor="#0066BC"><div align="left"><font color="#FFFFFF"><strong>Brought
Forwards</strong></font></div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"> <strong>Gross
Pay </strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="grossPay" type="text" id="grossPay2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Tax
Gross </strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="taxGross" type="text" id="taxGross2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Tax
Paid </strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="taxPaied" type="text" id="taxPaied2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Earn
For NI </strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="EarnForNI" type="text" id="EarnForNI2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Nat
Ins ER </strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="NatInsER" type="text" id="NatInsER2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Nat
Ins EE</strong></div></td>
<td bgcolor="#84939A"><div align="left"><strong><font color="#000000">
<input name="NatInsEE" type="text" id="NatInsEE2" size="13" maxlength="13" style="text-align: right">
</font></strong></div></td>
</tr>
<tr>
<td bgcolor="#84939A"><div align="right" class="style6"><strong>Total
Net Pay</strong></div></td>
<td bgcolor="#84939A"> <div align="left"><strong><font color="#000000">
<input name="TotalNet" type="text" readonly="true" id="TotalNet2" size="13" maxlength="13" style="text-align: right">
</font></strong> </div></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
<div align="left"> </div>
<div align="center"> <font color="#666666"> </font><font color="#666666">
</font> <font color="#666666"> </font></div>
<div align="center"></div>
<div align="center"><font color="#666666"> </font></div>
<div align="center"><font color="#666666"> </font></div>
<div align="center"><font color="#666666"> </font></div></td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Tax
Year</strong> <br>
<select name="TaxYear" id="select8" onChange="UpdateTaxCode()">
<option value="07/08">07/08</option>
<option value="06/07">06/07</option>
<option value="05/06">05/06</option>
</select>
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"> <div align="justify" class="style9"><span class="style5"><strong>Pay
Date</strong></span><strong> <br>
<input name="PayDate" type="text" disabled id="PayDate" size="10" maxlength="10">
</strong></div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Tax
Period</strong> <br>
<input name="TaxPeriod" type="text" id="TaxPeriod" size="2" maxlength="2" onKeyUp="isPayDate()">
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Tax
Code</strong> <br>
<input name="TaxCode" type="text" id="TaxCode" value="522L" size="10" maxlength="10">
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Basis</strong>
<br>
<select name="Basis" id="select9">
<option value="Cumulative">Cumulative</option>
<option value="W1/M1">W1/M1</option>
</select>
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">NI
Code</strong> <br>
<select name="NICode" id="select10">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="J">J</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="S">S</option>
<option value="L">L</option>
<option value="X">X</option>
</select>
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Director</strong>
<br>
<select name="Dir" id="select11" onChange="isWeeks()">
<option value="N">N</option>
<option value="A">A</option>
<option value="P">P</option>
</select>
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Weeks</strong>
<br>
<input name="Weeks" type="text" disabled id="Weeks" size="3" maxlength="3">
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="bottom" class="capsule"><div align="justify" class="style9"><strong class="style5">Method</strong>
<br>
<select name="Method" id="select12">
<option value="Exact">Exact</option>
<option value="Table">Table</option>
</select>
</div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td height="21" valign="bottom"> </td>
<td> </td>
<td valign="bottom"> </td>
</tr>
<tr>
<td height="63" valign="bottom"> </td>
<td><div align="center"><font color="#666666">
<input name="HostName" type="hidden" id="HostName" value="PPS">
<input name="ALONE" type="hidden" id="ALONE" value="TRUE">
</font></div></td>
<td valign="bottom"> </td>
</tr>
<tr>
<td> </td>
<td height="85" valign="bottom"><div align="center"><font color="#666666">
<input name="Calc" type="submit" id="Calc4" value="Calc" style="width: 70">
<input type="reset" name="Reset" value="Reset" style="width: 70">
</font></div></td>
<td valign="bottom"> </td>
</tr>
</table>
</form>