Body mass index / Body surface area calculator

I'm trying to write a little page which will help me - when it ever gets finished - in my job to get some stuff done easier and faster. I'd like some hints and tricks for better structuring the code, i.e. to better divide logic from the UI.

I use jQuery a bit (need to expand my knowledge of using it) and will finally probably use twitter bootstrap as a framework.



`/*
* This section is about the "select" input elements
*
* This should realize a cascading dropdown, which
* shows options in the second select input elemen
* "protocols" depending on the selection of a scanner
*
* Found this solution on the web an adopted it ab bit
* to my needs.
*/

function appendOptionToSelect(sel, opt) {
try {
sel.add(opt, null);
} catch (e) {
//for IE7 and earlier
if (e.name == "TypeError") {
sel.options[sel.options.length] = opt;
} else {
throw e;
}
}
};

function removeAllChildNodes(element) {
if (element.hasChildNodes()) {
while (element.childNodes.length >= 1) {
element.removeChild(element.firstChild);
};
};
};

function selChanged(sel, data, dependentSel) {
var selection = sel.options[sel.selectedIndex].value;
var arrOptions = data[selection];
var opt;
removeAllChildNodes(dependentSel);
for (var i in arrOptions) {
opt = new Option(arrOptions[i]);
appendOptionToSelect(dependentSel, opt);
}
};

// This should be the object which holds the protocols specific
// for a scanner
var scanner = {
"scanner1" : ["--choose--", "protocol 1", "protocol 2", "protocol 3"],
"scanner2" : ["--choose--", "protocol 2", "protocol 4", "protocol 5"],
"scanner3" : ["--choose--", "protocol 1", "protocol 2", "protocol 5", "protocol 6"],
"scanner4" : ["--choose--", "protocol 3a", "protocol 4b", "protocol xyz"]
};

// Needed down in the eventhandlers
var selectScanner = document.getElementById("scanner");
var selectProtocol = document.getEleme

This is only about your HTML as I don't know much about JS. I guess your page will only be used internally by you, so it is not that important, but it may help others that come by.

• legend must only be used in fieldset

• label can only include "phrasing content", so h6 is not allowed there (in general I wouldn't use headings inside of the form at all)

• you should "connect" the label and it's input/select: with the for attribute

• omit choose as it is (probably) no valid choice

• group the two gender radio boxes in a fieldset with a legend like "Select gender"

• same with "Height [cm] and weight [kg]" (fieldset>legend instead of h6)

StackExchange Code Review Q#18870, answer score: 3