PDA

Click to See Complete Forum and Search --> : Endless Loop In Javascript Trouble

Force
06-25-2003, 09:08 AM
I have created the following two scripts. When I run them in my internal development environment (CF Studio 5.0), they both work fine. When I run them in in my browser (IE 6), the checkexist() function gets stuck in an endless loop on the first textarea only.
For example, if I tab without making an entry in the first textarea I get the alert box. I click on it, and I immediately get the alert box again. I'm not given a chance to make an entry in the block. It seems to work fine for the second block.
Any ideas?
I appreciate the assistance. Thanks.

Mark F.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Length Validation</title>


<script language=javascript>
function checkLength(size,controlStr) {
var maxlen = size
var val = document.myform[controlStr].value
var diff = val.length - size

if (val.length > size) {
alert("You have exceeded the maximum length of " + maxlen + " by " + diff + " characters.\n Please modify your entry.\n Thank you.")
val = val.substr(1, maxlen)
document.myform[controlStr].focus();
}
}
</script>

<script language="JavaScript">
function checkexist(contStr) {
var control = document.myform[contStr].value

if (control.length == 0) {
alert('This is a required field. \n Please verify your entry.\n Thank you.');
document.myform[contStr].focus();
}
}

</script>


</head>

<body>
<form action="testscriptact.cfm" method="post" name="myform">

<textarea name="test1" rows="5" cols="45" onblur="checkLength(15,'test1');checkexist('test1');"></textarea>
<br><br>
<textarea name="test2" rows="5" cols="45" onblur="checkLength(25,'test2');checkexist('test2');"></textarea>


<input type="submit" name="Submit">
</form>

</body>
</html>
freefall
06-25-2003, 09:20 AM
Hello,
The reason this happens is because when a user goes to the next form field without filling in the first, you call check exist for the one that was blurred. After checkexist is done with its alert, it changes the focus back to the first form field, therefore blurring the second, and calling checkexist with that one, it never stops! I will try to post an alternative way of doing this.

- Ian
freefall
06-25-2003, 09:54 AM
I'm not really awake right now so I couldn't find any foolproof ways around this, but here is one suggestion:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Length Validation</title>


<script language="Javascript">
var blocknext = 0
prevControlStr = null;

function checkLength(size,controlStr) {
var maxlen = size
var val = document.myform[controlStr].value
var diff = val.length - size

if (blocknext == 0 || prevControlStr == controlStr) {

if (val.length == 0) {
alert('This is a required field. \n Please verify your entry.\n Thank you.');
document.myform[controlStr].focus();
blocknext = 1
prevControlStr = controlStr
}

if (val.length > size) {
alert("You have exceeded the maximum length of " + maxlen + " by " + diff + " characters.\n Please modify your entry.\n Thank you.")
val = val.substr(1, maxlen)
document.myform[controlStr].focus();
blocknext = 1
prevControlStr = controlStr
}
}
else
blocknext = 0
}
</script>

</head>

<body>
<form action="testscriptact.cfm" method="post" name="myform">

<textarea name="test1" rows="5" cols="45" maxlength=15 onblur="checkLength(15,'test1');"></textarea>
<br><br>
<textarea name="test2" rows="5" cols="45" maxlength=25 onblur="checkLength(25,'test2');"></textarea>


<input type="submit" name="Submit">
</form>

</body>
</html>

Basically if you enter bad input, when the script checks the input in field #1, you are actually in field #2. So when it calls the focus, we have to tell it not to check field #2 when we switch.

This will work for any normal person inputting their information, you have to switch around a lot before it will fail and accidentally not check one.

Cheers,
Ian