Welcome to WebmasterWorld Guest from 54.226.194.180

Forum Moderators: open

Message Too Old, No Replies

Conflict between form and javascript

     

Fokel

1:10 pm on Oct 12, 2008 (gmt 0)

5+ Year Member



Hi all,

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>

Krispy2

2:05 pm on Oct 12, 2008 (gmt 0)

5+ Year Member



Dunno if it is related, but you ought to have a Radix parameter on your parseInt() calls [otherwise results are unpredictable, and dependant on the content of the first parameter].

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.

penders

12:24 am on Oct 14, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I assume you are trying this in IE, as I don't think other browsers will give you this error, but anyway... you shouldn't really be accessing your form elements in the global scope and there lies your problem. Once you add your form container, option.value (and your other elements) are no longer available (in IE). You need to access them via the forms array, since they are now contained within a form. Such as:

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

Fokel

5:20 am on Oct 14, 2008 (gmt 0)

5+ Year Member



Krispy2, thanks, I really forget to add ";"!
though still, it did not affect script, because it worked well (before adding form).

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.

Krispy2

6:15 am on Oct 14, 2008 (gmt 0)

5+ Year Member



"though still, it did not affect script, because it worked well (before adding form)."

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

Fokel

6:36 am on Oct 14, 2008 (gmt 0)

5+ Year Member



Krispy2, good link. I never used online services like that, it might be very helpful in some cases. After a few hours of coding I can turn a blind eye to some simple things like a "{" or ";"!

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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month