Free JavaScript BMI WeightAlert

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Instructions

Weight Alert calculates your body mass index (BMI). This is a measurement based on height and weight. It indicates if you are under or over your ideal weight.

Enter your height in feet and inches and your weight in pounds (lbs) in the form above. Then click on the button "result".

Your result:
underweight	0 - 18.5 BMI
normal	18.5 - 24.9 BMI
overweight	25 - 29.9 BMI
obese I	30 - 34.9 BMI
obese II	35 - 39.9 BMI
extremely obese	over 40 BMI

Free JavaScript WeightAlert
Enhance your website with our free JavaScript weight calculator. WeightAlert calculates the body mass index (BMI) of your visitor. BMI is a measurement based on height and weight. It indicates if your visitor is under or over his ideal weight. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10, Google Chrome 3x/4x.

Configuration:

Open your webpage. Paste the following code wherever you want to display WeightAlert:

<style>

.tdhead {
	font-family: Verdana;
	color: white;
	font-size: 10px;
}

.table {
	background-color: #888888;
	border: solid 1 black;
}

.tdcopy {
	font-family: verdana;
	font-size: 10px;
}

.tdresult {
	font-family: Arial;
	font-size: 10px;
}

.inputbox {
	font-family: verdana;
	font-size: 10px;
	background-color: #888888;
	color: #000000;
	font-weight: bold;
	padding: 1px;
	margin: 2px;

}
.inputfield {
	font-family: verdana, arial, sans-serif;
	font-size: 8px;
	background-color: #ffffff;
	color: #000000;
}
.button {
	font-family: verdana;
	font-size: 10px;
	border: solid 1 black;
}
</style>

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var result=""
var content=""

function getresult() {
   	hght=eval(12*document.my.feet.options[document.my.feet.selectedIndex].value) + eval(document.my.inches.options[document.my.inches.selectedIndex].value)
	result=Math.round(703*document.my.weight.options[document.my.weight.selectedIndex].value*100/hght/hght)/100
	displayresult()
}

function displayresult() {
		document.getElementById("underweightbox").style.color="black"
		document.getElementById("normalbox").style.color="black"
		document.getElementById("overweightbox").style.color="black"
		document.getElementById("obese1box").style.color="black"
		document.getElementById("obese2box").style.color="black"
		document.getElementById("obese3box").style.color="black"
	if (result<18.5) {
		document.getElementById("underweightbox").style.color="red"
	}
	else if (result>=18.5 && result<=24.9) {
		document.getElementById("normalbox").style.color="green"
	}
	else if (result>24.9 && result<=29.9) {
		document.getElementById("overweightbox").style.color="red"
	}
	else if (result>29.9 && result<=34.9) {
		document.getElementById("obese1box").style.color="red"
	}
	else if (result>34.9 && result<=39.9) {
		document.getElementById("obese2box").style.color="red"
	}
	else {
		document.getElementById("obese3box").style.color="red"
	}
	
	document.getElementById("instructionbox").style.visibility="hidden"
	document.getElementById("resultbox").style.visibility="visible"
   	document.getElementById("yourbmibox").innerHTML="Your result: "+result+" BMI"
}

</script>

<tr>
<td bgcolor="#333333" align=center class="tdhead" colspan=2>select height and weight</td>
</tr>

<tr>
<td bgcolor="#EEEEEE" align=right class="tdcopy">height</td>
<td bgcolor="#EEEEEE"><select name="feet" style="font-size:8pt;background-color:#FFFFFF">
<option value="2">2 feet</option>
<option value="3">3 feet</option>
<option value="4">4 feet</option>
<option value="5">5 feet</option>
<option value="6">6 feet</option>
<option value="7">7 feet</option>
<option value="8">8 feet</option>
</select>

<select name="inches" style="font-size:8pt;background-color:#FFFFFF">
<option value="0">0 inch</option>
<option value="1">1 inch</option>
<option value="2">2 inches</option>
<option value="3">3 inches</option>
<option value="4">4 inches</option>
<option value="5">5 inches</option>
<option value="6">6 inches</option>
<option value="7">7 inches</option>
<option value="8">8 inches</option>
<option value="9">9 inches</option>
<option value="10">10 inches</option>
<option value="11">11 inches</option>
</select>

</td>
</tr>

<tr>
<td bgcolor="#EEEEEE" align=right class="tdcopy">weight</td>
<td bgcolor="#EEEEEE">
<select name="weight" style="font-size:8pt;background-color:#FFFFFF">
<script>
for (i=20;i<=500;i++) {
	document.write('<option value="'+i+'">'+i+' lbs</option>')
}
</script>
</select>

</td>
</tr>

<tr>
<td bgcolor="#333333" align=center class="tdhead"><span style="position:relative;">Instructions</span></td>
</tr>

<tr>
<td bgcolor="#EEEEEE" class="tdresult"><span>BMI Spy calculates your body mass index (BMI). This is a measurement based on height and weight. It indicates if you are under or over your ideal weight. <br><br>

Enter your height in feet and inches and your weight in pounds (lbs) in the form above. Then click on the button "result".
</span></td>
</tr>
</table>
</div>

<tr>
<td bgcolor="#333333" align=center class="tdhead" colspan=2><span id="yourbmibox">Your result:</span></td>
</tr>

<tr>
<td bgcolor="#CCCCCC" class="tdresult"><span id="underweightbox">underweight</span></td>
<td bgcolor="#CCCCCC" class="tdresult">0 - 18.5 BMI</td>
<tr>

<tr>
<td bgcolor="#EEEEEE" class="tdresult"><span id="normalbox">normal</span></td>
<td bgcolor="#EEEEEE" class="tdresult">18.5 - 24.9 BMI</td>
</tr>

<tr>
<td bgcolor="#CCCCCC" class="tdresult"><span id="overweightbox">overweight</span></td>
<td bgcolor="#CCCCCC" class="tdresult">25 - 29.9 BMI</td>
</tr>

<tr>
<td bgcolor="#EEEEEE" class="tdresult"><span id="obese1box">obese I</span></td>
<td bgcolor="#EEEEEE" class="tdresult">30 - 34.9 BMI</td>
</tr>

<tr>
<td bgcolor="#CCCCCC" class="tdresult"><span id="obese2box">obese II</span></td>
<td bgcolor="#CCCCCC" class="tdresult">35 - 39.9 BMI</td>
</tr>

<tr>
<td bgcolor="#EEEEEE" class="tdresult"><span id="obese3box">extremely obese</span></td>
<td bgcolor="#EEEEEE" class="tdresult">over 40 BMI</td>
</tr>

</table>
</div>
</div>