PDA

Click to See Complete Forum and Search --> : What's going on here??? 1999 > 10000?

wbg976
10-02-2005, 03:53 PM
I setup a javascript function to validate a form submission. the low price should be lower than the high price otherwise it throws up and alert box. In the example below (on my computer at least), I get an error box when I hit submit... what is wrong???

<html>
<head>
</head>
<body>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="top">
<script language="JavaScript">
<!--
function validateForm(thisForm){
if (thisForm.low.value == "") {
alert("You must enter a starting price.");
thisForm.low.focus();
return false;
} else if(!isNumber(thisForm.low.value)) {
alert("Please enter a number for the starting price.");
thisForm.low.focus();
return false;
} else if (thisForm.high.value == "") {
alert("You must enter a maximum price.");
thisForm.high.focus();
return false;
} else if(!isNumber(thisForm.high.value)) {
alert("Please enter a number for the maximum price.");
thisForm.low.focus();
return false;
} else if(thisForm.low.value > thisForm.high.value) {
alert("The starting value is greater than the maximum price. " + thisForm.low.value + " > " + thisForm.high.value);
thisForm.low.focus();
return false;
} else {
return true;
}
}

function isNumber(entry) {
validChar='0123456789'; // characters allowed
strlen=entry.length; // how long is test string
if (strlen < 1) {return false;} // no check!
// Now scan string for illegal characters
for (i=0; i < strlen; i++ ) {
if (validChar.indexOf(entry.charAt(i)) < 0) {
return false;
}
}
return true;
}

//-->
</script>
<form method="post" onSubmit="return validateForm(this)" action="test.html">
<input type="hidden" name="valid" value="true" />
<input type="hidden" name="start" value="0" />
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td nowrap align="right">Price Range:</td>
<td nowrap>&nbsp;&nbsp;&nbsp;<input type="text" name="low" size="4" value="1999"/> to <input type="text" name="high" size="4" value="10000"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;&nbsp;
<input type="submit" name="search" value="Search" />
</td>
</tr>
</table>
</form>
</body>
</html>
Charles
10-02-2005, 04:53 PM
what is wrong???1) Your HTML is abysmal.

2) The "value" of a form control is a string type. Given "a > b" where "a" and "b" are strings, the operation returns true if "b" preceeds "a" in alphabetical order. You want "Number (a) > Number (b)" or "a.valueOf() > b.valueOf()".
Ultimater
10-02-2005, 05:51 PM
Something to play with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
input{text-align:center; width:250px;}
</style>
</head>
<body>
<p>
<script type="text/javascript">
var w="";
for(var i=33;i<255;i++){w+="&#"+i+";";}
document.write("33<br>"+w+"<br>255<br><br><br>");
</script>
<input type="button" value="&quot;a&quot;&nbsp;&gt;&nbsp;&quot;b&quot;" onclick='alert("a" > "b")'><br>
<input type="button" value="&quot;a&quot;&nbsp;&gt;&nbsp;&quot;B&quot;" onclick='alert("a" > "B")'><br>
<input type="button" value="&quot;a&quot;&nbsp;&gt;&nbsp;&quot;zz&quot;" onclick='alert("a" > "zz")'><br>
<input type="button" value="&quot;0&quot;&nbsp;&gt;&nbsp;&quot;z&quot;" onclick='alert("0" > "z")'><br>
<input type="button" value="&quot;0&quot;&nbsp;&gt;&nbsp;&quot;9&quot;" onclick='alert("0" > "9")'><br>
<input type="button" value="&quot;1a&quot;&nbsp;&gt;&nbsp;&quot;1b&quot;" onclick='alert("1a" > "1b")'><br>
<input type="button" value="&quot;19&quot;&nbsp;&gt;&nbsp;&quot;10&quot;" onclick='alert("19" > "10")'><br>
<input type="button" value="&quot;19&quot;&nbsp;&gt;&nbsp;&quot;100&quot;" onclick='alert("19" > "100")'><br>
<input type="button" value="&quot;199&quot;&nbsp;&gt;&nbsp;&quot;100&quot;" onclick='alert("199" > "100")'><br>
<input type="button" value="&quot;1999&quot;&nbsp;&gt;&nbsp;&quot;10000&quot;" onclick='alert("1999" > "10000")'><br>
<input type="button" value="1999&nbsp;&gt;&nbsp;10000" onclick='alert(1999 > 10000)'><br>
<input type="button" value="Number(&quot;1999&quot;)&nbsp;&gt;&nbsp;Number(&quot;10000&quot;)" onclick='alert(Number("1999") > Number("10000"))'>
</p>
</body>
</html>


Notice that the number 0 is closer to the left on the character map than the number 9 is. Since the exclamation point is character number 33, then the number 0 is character number 48 while the number 9 is character 57.
Since 57 is greater than 48, thus JavaScript knows that "9" > "0".
However, whenever you have more than one digit, JavaScript first compairs the first two digits with each other, if they aren't the same, JavaScript ignores the rest of the string. If they match, then they are equal so JavaScript needs to compair the next to digits.
So in otherwords, to JavaScript "9" > "8999999999" because JavaScript never needs to look beyond the first character of each string to decide the winner which the number "9" is greater than "8".


In your case, "1999" > "10000" because JavaScript reacts to it like a string and how else can JavaScript comapir the letter "a" and "b"? it needs to take the character value of each, thus that is what JavaScript does in the case of string-numbers, it reacts to it like a string.

JavaScript greater-than operator reaction to "1999" > "10000":

Takes the first character of each string, "oh no, 1 equals 1, we have a tie", proceeds to the next character
Takes the second character of each string "9 is greater than 0, we have a winner", returns true


JavaScript greater-than operator reaction to "a2!95d" > "a2z434dds":

Takes the first character of each string, "oh no, a equals a, we have a tie", proceeds to the next character
Takes the second character of each string, "oh no, 2 equals 2, we have a tie", proceeds to the next character
Takes the third character of each string "! is smaller than 0, we have a winner", returns false