Forum Moderators: open
I really can not understand whether is it a normal situation, or is it a real conflict?
I have form elements, where client can enter different values, select checkboxes and other stuff. All the entered and chosen data is calculated with simple javascript, to produce the final result depending on selected values.
Everything works fine, until I add <form ......> and </form> tags around my html code. As soon as I add them, there is a message in status bar of the browser telling me about mistake ("<variable> is not defined"), and it refuses to calculate!
I can't see any reason for that... Any guesses? Why does the script work when there are no <form> tags, and how can simple <form> tag affect the whole stuff so badly?!
here is the working code:
...but if I remove <!-- --> near first <form..> and </form> tags, it gives an error and stop working... why?
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<!--
<form method="post" action="mailer.php">
-->
<p>Choose option:
<select id="option" name="option" onChange="calculate();">
<option value="6000">op1</option>
<option value="5000">op2</option>
<option value="4000">op3</option>
<option value="3000">op4</option>
</select>
</p>
<p>Enter number:
<input id="number" name="number" type="text" value="0" onChange="calculate();">
</p>
<p>Checkbox:
<input id="check" name="check" type="checkbox" onClick="calculate();">
Yes</p>
<p>Result:
<input id="res" name="res" type="text" disabled>
</p>
<p>
<input type="submit" name="Submit" value="submit">
</p>
<!--
</form>
-->
<script language="JavaScript">
var timer,x1,x2,x3,result;
function calculate()
{
if(isNaN(x1=parseInt(option.value))){x1="0";}
if(isNaN(x2=parseInt(number.value))){x2="0";}
if(check.checked){x3=500;}else{x3=0;}
if (x2 <= 10) {x2=500}
else if (x2 > 10 && x2 < 50) {x2=1500}
else {x2=3000}
result=0;
result=result+x1;
result=result+x2;
result=result+x3;
res.value=result;
}
</script>
</body>
</html>
You ought to have a ";" in {x2=500}, {x2=1500} and {x2=3000}
I'm not sure that isNaN() on the result of parseInt() is going to give you the desired effect.
document.forms[0].option.value
However, since you have IDs on your form elements, you could consider using the newer DOM methods...
document.getElementById('option').value
penders, thank you very much! that's it!
This situation also happens in Opera 9.22 (without details about error, but no calculations and empty "result" field, so the problem exists).
very good advice. Now I will rewrite the whole page using DOM and tell about results here.
Yup, I was just being pedantic, but if you compress/minify the script it might become wrongly interpreted.
I find putting JS scripts through Lint (jsLint.com) is often revealing
and, finally, my script and form both work fine!
big thanks to penders! DOM approach fixed it all. Very simple and precise suggestion!
updated script:
<script language="JavaScript">
var timer,x1,x2,x3,result;
function calculate()
{
if(isNaN(x1=parseInt(document.getElementById('option').value))){x1="0";}
if(isNaN(x2=parseInt(document.getElementById('number').value))){x2="0";}
if(document.getElementById('check').checked){x3=500;}else{x3=0;}
if (x2 <= 10) {x2=500;}
else if (x2 > 10 && x2 < 50) {x2=1500;}
else {x2=3000;}
result=0;
result=result+x1;
result=result+x2;
result=result+x3;
document.getElementById('res').value=result;
}
</script>
I really love this board! )
[edited by: Fokel at 6:37 am (utc) on Oct. 14, 2008]
