You don't really need to use AJAX on this one as simple javascript can do the trick. You can change the text in a textbox/div or anything at all with a button click or just any other event.
I needed to save your code and load it on my own just to find out the erros. It could have been better if you wrapped some of the code, especially the javascript. Heres a tip: use around 80 columns and wrap the remaining code on a new line. It's also what most programmers do.
Now, you had redudant names in your input boxes, that's ambiguous. A name should be as unique as an id especially if you're gonna use it to get values. What do you think would happen if you have green = document.form1.green.value;? Since there are 2 boxes with the name "green", javascript won't know which one you are asking for, and that complicates things for you and javascript. ;p You should use meaningful names for your boxes. In your function you were using insure.value, but in your html it was named "pink", why didn't you just name it as insure as that would have been meaningful? And you were using a name ("insure") which is not even existent in your html code anyway.
HTML Code:
....<td><input name="insure" size="5" /></td><!-- rename all the other redundant ones, putting a closing tag "/>" at the end of an empty tag (like input) is recommended instead of ">" -->
....
<tr>
<td><input type="button" value="Calculate Total" name="calculate" onclick="calc();" /></td>
<!-- calculate() apparently isn't working, it seems that it's a reserved javascript word, just use another name or change it's case (ex. Calculate()) -->
<td><input name="total" type="text" value="$ 0.00" /></td>
<!-- Total i think would be a better name for it. You can even use any element like a div/span/etc -->
</tr>
and then on the script start to practice organizing your code a bit, you'll have an easier time if you put them first in variables so you can easily use them later. And as a student, you'll have an easier time understanding code by doing so.
Code:
// calculate() doesn't seem to work, probably a reserved keyword
// used a different name:
function calc()
{
var rego, pink, insure, ...blah;
var total;
rego = toNum(document.form1.rego.value);
pink = toNum(blah);
insure = toNum(document.form1.insure.value);
...
total = rego + pink + blah...;
document.form1.total.value = "$ " + total;
...
then have a function that checks if the values entered are actually numbers or 0 if not a number (NaN) because if you use + right on you'll end up concatenating the values instead of adding them because they are actually strings ("1" + "1" = "11" and not 2). parseFloat() seems to a better option than Number().
Code:
function toNum(str)
{
return (isNaN(str) || str == "") ? 0 : parseFloat(str);
}
I think you need to study some more, also, you are using some deprecated tags and attributes that are now supposed to be done using CSS. And your page is in quirks mode (displays page as if it was from an older browser). You ought to turn it to standard compliance mode. You can do that by adding a DOCTYPE declaration at the very top of the html page.
ex:
Code:
<!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" lang="en">
<head>...
There are many kinds of doctypes but this one I like the most. Also note that what you are actually using is NOT HTML but rather XHTML. If you wan't to know more just w3school or google.
I wanted to impart this bits of info to you earlier on so that you can go on with what you are learning as a student whilst making well-formed code. You may however wish to ignore this stuffs for now. It might me too much for you to understand, but it's better you learn this stuff already as you'll eventually need it anyway.^^
EDIT: you can see the code in action here: http://kiddragon.co.cc/test/costs.html I used regular expression for checking the number instead, only numbers 0.124, 11.024, 124 etc are valid everything else it will evaluate to 0 (including -1 etc and 1e20) You had 2 green slip fields I just removed one. You can look at the source code but try to do it on your own.
LinkBack URL
About LinkBacks
STUDENT - Javascript Problem
Reply With Quote
Originally Posted by xmakina
