Hi!
This should work for IE, NS4.x and higher, Mozilla and Opera 6.
The stuff above the body:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var NS4x= document.layers;
var OP = (navigator.appName=="Opera")?1:0;
var NS = (navigator.appName=="Netscape")?1:0;
var val1;
var val2;
var val3;
function calc(val){
val1=0;
val2=0;
val3=0;
if (val.value.substring(0,1)=="0"){
val.value=val.value.substring(1,val.value.length);
}
if (val.value!=val.value.replace(/[^0-9]/g,'')){
val.value=val.value.replace(/[^0-9]/g,'')
}
if (document.forms[0].amount1.value!=""){
val1=Number(document.forms[0].amount1.value);
}
if (document.forms[0].amount2.value!=""){
val2=Number(document.forms[0].amount2.value);
}
if (document.forms[0].amount3.value!=""){
val3=Number(document.forms[0].amount3.value);
}
if (!NS4x && !OP){//display result in table cell
document.getElementById('result').innerHTML=(val1+val2+val3);
}
else{//display result in form field (Opera and NS4.x)
document.forms[0].amount4.value=(val1+val2+val3);
}
}
function check(evt){// doesn't work in Opera (work around in calc function)
if(!NS){
if (evt.keyCode ==8 || evt.keyCode ==9 || evt.keyCode ==35 || evt.keyCode ==36 || evt.keyCode ==37 || evt.keyCode ==39 || evt.keyCode ==46 || (evt.keyCode>47 && evt.keyCode<58)){
return true;
}
else{
return false;
}
}
if(NS){//evt.which ==0 to enable arrow keys, del etc. in Mozilla
if (evt.which ==0 || evt.which ==8 || evt.which ==9 || evt.which ==35 || evt.which ==36 || evt.which ==37 || evt.which ==39 || evt.which ==46 || (evt.which>47 && evt.which<58)){
return true;
}
else{
return false;
}
}
}
function checkPaste(val){
if (val.value!=val.value.replace(/[^0-9]/g,'')){
val.value=val.value.replace(/[^0-9]/g,'')
}
calc(val);
}
function formCheck(){
if (document.forms[0].amount1.value==""||document.forms[0].amount2.value==""||document.forms[0].amount3.value==""){
alert('Please enter a number in all three input fields!');
for (var i =3; i > 0; i--){
if (document.forms[0]['amount'+i].value==""){
document.forms[0]['amount'+i].focus();
}
}
return false;
}
return true;
}
//-->
</script>
</head>
The rest:
<body>
<?php
echo "<form method=\"post\" action=\"yourPHPfilenameAndPath\" onSubmit=\"return formCheck()\"><table>";
for ($i=1; $i<=3; $i++) {
echo "<tr><td>Field $i</td><td><input type=\"text\" name=\"amount".$i."\" onKeypress=";
echo "\"return check(event,this.value)\" onKeyup=\"calc(this)\" onfocus=";
echo "\"calc(this)\" onblur=\"calc(this)\" onClick=\"calc(this)\"></td></tr>";
}
echo "<tr><td>Result</td><td id=\"result\">";
echo "<script language=\"JavaScript\" type=\"text/javascript\">";
echo "<!--"."\n";
echo "if (NS4x || OP){//write text field for Opera and NS4.x"."\n";
echo "document.write('<input type=text name=\"amount4\" readonly>');";
echo "}";
echo "//-->"."\n";
echo "</script>";
echo "</td></tr><tr><td> </td><td><input type=\"submit\" value=\"submit\"></td></tr></table></form>";
?>
</body>
</html>
In Opera and NS4, an additional textfield will show up to display the result.
Cheers - Pit