Free content for your own website/blog

By copying and pasting just 2 blocks of code, you too can have an option pricing calculator on your own website.

An option calculator can add tremendous value to your site and greatly enhance your visitor’s experience of your site. The functionality provided by the application creates the much need stickiness all websites strive for…your visitors will stay longer at your site and therefore be more likely to click on one of your many offers.

A great way to do this is to insert the calculator next to or above a block of Adsense advertisements. The horizontal style is perfectly suited to this – it is the exact width of a medium Adsense banner. See the horizontal example.

I’ve created 3 different styles of the calculator. Here they are in action:

Horizontal

Vertical 1

Vertical 2

Check out a working example in production at Asia ETrading

Terms and Conditions

You may use this calculator freely on your website provided you link back to Option-Price.com with every instance. This means that are free to change the layout of the calculator in any way wish, including renaming variable inputs, as long as the credit for the calculator points back to Option-Price.com

Stay Updated

If you decide to place the calculator on your site, drop me an email and let me know so I can keep you updated as I make changes/enhancements.

Source Code

For each example above, here is the applicable source code.

Horizontal

Place the code below between the HEAD tags:

Then place this piece of code inside the BODY tags:

<form id="formc" name="formc" method="post" action=""> <script language="javascript"> var submitted = false; function check_submit() {if (submitted) {alert("You have already submitted the form. Please be patient."); submitted = false; // reset if the user wants to submit again, for example due to failure return false; } else { recalc_onclick(''); // force recalc before submit submitted = true; document.formc.submit(); return true;}} </script> <div id="op_wrap"> <div id="op_in"> <table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" > <tr> <td> </td> <td> </td> </tr> <tr><td> <p><input value="25.00" name="p1A1" id="p1A1" type="text" onblur="this.value=eedisplayFloatNDTh(eeparseFloatTh(this.value),2);recalc_onclick('p1A1')" tabindex="1" ></p> </td> <td><p>Stock Price</p></td> </tr> <tr> <td><p><input value="25.45" name="p1A2" id="p1A2" type="text" onblur="this.value=eedisplayFloatNDTh(eeparseFloatTh(this.value),2);recalc_onclick('p1A2')" tabindex="2" ></p> </td> <td><p>Exercise Price</p></td> </tr> <tr> <td><p><input value="25.00%" name="p1A3" id="p1A3" type="text" onblur="this.value=eedisplayPercentND(eeparsePercent(this.value),2);recalc_onclick('p1A3')" tabindex="3" ></p></td> <td><p>Volatility</p></td> </tr> <tr> <td><p><input value="3.50%" name="p1A4" id="p1A4" type="text" onblur="this.value=eedisplayPercentND(eeparsePercent(this.value),2);recalc_onclick('p1A4')" tabindex="4" ></p></td> <td><p>Risk Free Rate</p></td> </tr> <tr> <td><p><input value="0.00%" name="p1A5" id="p1A5" type="text" onblur="this.value=eedisplayPercentND(eeparsePercent(this.value),2);recalc_onclick('p1A5')" tabindex="5" ></p> </td> <td><p>Dividend Yield</p></td> </tr> <tr> <td><p><input value="30" name="p1A6" id="p1A6" type="text" onblur="this.value=eedisplayFloatNDTh(eeparseFloatTh(this.value),0);recalc_onclick('p1A6')" tabindex="6" ></p> </td> <td><p>Days to Expiry</p></td> </tr> </table> <p> </p> </div> <div id="op_out"> <table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" > <tr> <td class="ophead1"> </td> <td class="ophead"><p>Call</p></td> <td class="ophead"><p>Put</p></td> </tr> <tr> <td><p>Price</p></td> <td><p><input value="0" name="p1B15" id="p1B15" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C15" id="p1C15" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> <tr> <td><p>Delta</p></td> <td><p><input value="0" name="p1B16" id="p1B16" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C16" id="p1C16" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> <tr> <td><p>Gamma</p></td> <td><p><input value="0" name="p1B17" id="p1B17" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C17" id="p1C17" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> <tr> <td><p>Theta</p></td> <td><p><input value="0" name="p1B18" id="p1B18" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C18" id="p1C18" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> <tr> <td><p>Vega</p></td> <td><p><input value="0" name="p1B19" id="p1B19" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C19" id="p1C19" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> <tr> <td><p>Rho</p></td> <td><p><input value="0" name="p1B20" id="p1B20" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> <td><p><input value="0" name="p1C20" id="p1C20" type="text" tabindex="-1" readonly="true" style='overflow:hidden; border:0px solid #000000; width:100%'></p></td> </tr> </table> </div> <div id="op_link"> <p>Powered by <a href="http://www.option-price.com/">Option-Price.com</a></p> </div> </div> <script language="javascript"> function reset_onclick(x){document.formc.reset();postcode();recalc_onclick('');};function postcode(){};function eequerystring(){var querystring=document.location.search;if(querystring.length>0){variables=(querystring.substring(1)).split("&");var variable;var key;var value;for(var ii=0;ii<variables.length;ii++){variable=variables[ii].split("=");key=unescape(variable[0]);value=unescape(variable[1]);if(document.formc[key]!=null){document.formc[key].value=value;}}}}function initial_update(){postcode('');eequerystring();recalc_onclick('');} </script> </form>

Vertical 1

Place the code below between the HEAD tags:

Then place this piece of code inside the BODY tags:

Vertical 2

Place the code below between the HEAD tags:

Then place this piece of code inside the BODY tags:

Support

If you have any troubles installing the calculator, please send me an email including the URL of the offending page and I'll take a look

Good luck!

Tips and Tricks

For the default styles to work correctly, you'll need a valid Doc Type at the start of your HTML. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

So, if you find the fonts don't come out the same as my examples, this will be the reason.

Also, notice how my calculator loads automatically when the page loads? If you want yours to do this then make your <body> tag look like this: