homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Conflict between form and javascript
Fokel

5+ Year Member



 
Msg#: 3764061 posted 1:10 pm on Oct 12, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3764061 posted 2:05 pm on Oct 12, 2008 (gmt 0)

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

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



 
Msg#: 3764061 posted 12:24 am on Oct 14, 2008 (gmt 0)

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+ Year Member



 
Msg#: 3764061 posted 5:20 am on Oct 14, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3764061 posted 6:15 am on Oct 14, 2008 (gmt 0)

"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

5+ Year Member



 
Msg#: 3764061 posted 6:36 am on Oct 14, 2008 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved