Further to my recent post in this newsgroup i've got to admit i'm
struggling. I've no experience with javascript or it's workings.
You probably wont find a single tutorial to teach you everything
that's needed, you'll need to learn about javascript in general then
apply the knowledge to problem.
You need to learn how to get values from form controls, validate the
input, display error messages, do calculations and format and present
the results.
The following should get you started, I've used an alert for the error
messages but it is much better to write them to the page in an
appropriate spot. I'll leave that to you:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<title>Units per Hour</title>
<style type="text/css">
.label {text-align: right;}
</style>
<script type="text/javascript">
// The following set of functions adds a toFixed method
// to the built-in Number object
// From clj FAQ:
http://www.jibbering.com/faq/#FAQ4_6
function Stretch(Q, L, c) { var S = Q
if (c.length>0) while (S.length<L) { S = c+S }
return S
}
function StrU(X, M, N) { // X>=0.0
var T, S=new String(Math.round(X*Number("1e"+N)))
if (S.search && S.search(/\D/)!=-1) { return ''+X }
with (new String(Stretch(S, M+N, '0')))
return substring(0, T=(length-N)) + '.' + substring(T)
}
function Sign(X) { return X<0 ? '-' : ''; }
function StrS(X, M, N) { return Sign(X)+StrU(Math.abs(X), M, N) }
Number.prototype.toFixed= function(n){ return StrS(this,1,n)};
// Check a possible float - decimal place is optional
function validNum(n) {
return /^\d+\.?\d*$/.test(n);
}
// Check an int
function validInt(n) {
return /^\d+$/.test(n);
}
// Convert units to per hour
function unitsPerHr(form) {
var rate;
var dist = form.distance.value;
var time = form.time.value.split(':');
var hr = time[0];
var min = time[1];
var sec = time[2];
var err = [];
// Check distance is a valid number
if (!validNum(dist)) {
err.push('Quantity must be a valid number, e.g. 23.5');
}
// Check time parts are valid
if (!validInt(hr) || !validInt(min) || !validNum(sec)) {
err.push('Time must be hour:min:sec, e.g. 2:23:15.5');
}
// Check time numbers are within range
if (min > 59 || sec >= 60) {
err.push('Minutes and seconds must be less than 60');
}
// Convert time to decimal hours:
hr = +hr + min/60 + sec/3600;
if (hr > 0) {
rate = (dist/hr).toFixed(2);
} else {
err.push('Time must be greater than zero')
}
if (err.length > 0) {
alert(err.join('\n\n'));
} else {
document.getElementById('result').innerHTML =
rate + ' units per hour';
}
return false;
}
</script>
<form action="" onsubmit="return unitsPerHr(this);">
<table>
<tr>
<td class="label">Enter quantity:
<td><input type="text" name="distance" value="0">
<tr>
<td class="label">Enter time<br>hr:min:sec:
<td><input type="text" name="time" value="0:0:0">
<tr>
<td class="label"><input type="submit" value="Calculate">
<td><span id="result"></span>
</table>
</form>
