Welcome to WebmasterWorld Guest from 34.231.21.123

Forum Moderators: open

Message Too Old, No Replies

Trouble with Form Verification

I can't get the JavaScript to work

     
2:27 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


Hey guys/girls,

I am basically teaching myself JavaScript from all the useful websites i can find.
My latest project is to introduce form verification. I have a page of inputs which are parameters for an image simulator. I just want to check simple things whether the data entered is within certain boundaries etc etc...

Unfortunately whatever i do the form submits without checking! (n.B this is all "offline" stuff at the moment)

I would appreciate some help, or pointers where i am going wrong.

Thanks

___________________________________________________________

here is the code for the JavaScript:
___________________________________________________________


<html>
<head>
<title>
MSSL ::: GAIA IMAGE SIMULATION - Parameter Input </title>
[code]
<script language="JavaScript">


//form verification


function checkform(oForm) {

 
if((oForm.xpixels < 500) oForm.xpixels > 1010)) {


alert("Number of xpixels is not within boundary");


return.false;


}


else {


return.true ;


}

 
}


</script>


</head>

___________________________________________________________

and the form part of the html:
___________________________________________________________


<form name="form" onSubmit = "return checkform(this)"
action="thankyou.html" method="post">

____________________________________________________________

and the input:
____________________________________________________________


<!-- NUMBER TWO INPUT -->


<tr>
<td valign="middle">
<font size="3">2. Number of X pixels:&nbsp &nbsp</font>
<input size="4" type = "text" name="xpixels"
value="1000" maxlength='4'>
</input>
&nbsp
&nbsp
</td>


<td border="0" valign="middle" align = "right">
<input type="button" value="Help" name="button3"
target="new" onClick="Start('xpixel.html')"
onMouseover="window.status='Explanation for
parameter 2'; return true"
onMouseout="window.status=' '; return true">
</td>

__________________________________________________________

and the submit button:
___________________________________________________________


<td align="center">
<input type ="submit" value="Start Program">
</input>
&nbsp
&nbsp
<input type = "reset">
</input>
</td>

____________________________________________________________

I am pretty sure i am just missing something silly. Either that,..or i am just not as clever as i think.

Lol,

Have a good day!

2:39 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:889
votes: 0


It should be 'return false' or return(false) rather than 'return.false'

I just had the code work for me with that change.

Just silly stuff - you probably are as clever as you think!

3:05 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


Hello Iguana,

Thanks for the (quick) reply! I changed the return.false to return false, but the form still just jumps to the thankyou.html page that is set as "action".

What could be wrong?!

Interestingly enough i was browsing other forms and looking at their html sources. I got to this demo one and found that the page doesn't produce the alerts it should do on my machine:

[tiger.coe.missouri.edu...]

Since you said that my script was working on your machine, is there any reason why it shouldn't on mine i.e no JavaScript support?!

Unfortunately i have another JavaScript code in the <head> tags that open new windows. This one does work:

<script language="JavaScript">

//JavaScript to open a pop-up window for "help"

function Start(page) {

OpenWin = this.open(page, "CtrlWindow","toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=350,height=250");

}

</script>

The only other though that i have is that i have 17 other inputs on my form apart from the one listed in my first post. Is it possible an error in those could cause a problem with the JavaScript function even if they aren't being used by it. They are all based on the same script apart from two which are <select> based.

Thanks again

3:08 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


What i meant to say above is whether the JavaScript on the link i added works for you?!

If it does then there is obviously a problem with my browser or something (as well as the original error in the code)

Thanks,

Dunc

3:14 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 12, 2002
posts:857
votes: 0


Try this:

<script language="JavaScript">

//form verification

function checkform(oForm) {

if((oForm.xpixels < 500) oForm.xpixels > 1010))
{
alert("Number of xpixels is not within boundary");
return (false);
}

return (true);

}

</script>

3:52 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


Hey thanks again,

But no it still isn't working! AHHHHH

I separated the bits of the code that i posted on this site, from all the other stuff and put that into a new html file. I then used that, with the amendments and again it still just jumps to:

thankyou.html

as in the action="thankyou.html".

So it can't be any other faults...

Did anyone try the link i put above?! It would be useful to know if that form verification works for you guys, because it definitely doesn't for me! There could be a problem there!

I use a Unix system with Mozilla 1.0.1 (lol well basic)- stone-age almost.

Thanks peeps,

Duncs

4:13 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 12, 2002
posts:857
votes: 0


The problem is probably here "((oForm.xpixels < 500) oForm.xpixels > 1010))" - maybe you are not calling "xpixels" correctly.

If you are calling a form field, it should look like this: document.form1.fieldname.value > 1010

Did anyone try the link i put above?! It would be useful to know if that form verification works for you guys, because it definitely doesn't for me! There could be a problem there!

That form does not work for me, it gives errors.

4:30 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


document.form1.fieldname.value

Or, better yet, give the input field an ID, and call it using something like this:

if(document.getElementsById) {
value = document.getElementsById('theid').value;
}
else if(document.all) {
value = document.all['theid'].value;
}

4:31 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


Lol,

nope it still not working...

It does seem to me like its not running the JavaScript properly. Do i need to make sure that the form input is a number before doing an if statement that looks at its magnitude.

I remember someone telling me about "parseField" or something like that. Do i need to pass all input values through that to make sure they are integers etc etc..

Duncs

4:33 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 20, 2002
posts:889
votes: 0


I did have to change the to to get it working. (on WW the character displayed is different from when I type on my PC)

Is your browser set to Always display Javascript errors because then it will indicate the line that fails?

4:47 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


So you are telling me the code that i posted up here works for you?!

I know you have to change the ¦¦ as its different on here than in my emacs text editor...

Nyhowz,..so the code works fine with you,..but the exact same code doesn't work with me?!

Thats WELL weird.

Wot does that tell us?! That it's something to do with my browser maybe...?

Duncs

4:56 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Which browser are you using?
4:59 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


I use a Unix system with Mozilla 1.0.1 (lol well basic)- stone-age almost.

thing is i do get javascript popups from other things,..or from other form verifications....

5:08 pm on Dec 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 12, 2002
posts:857
votes: 0


This worked for me:

<script language="JavaScript">

//form verification

function checkform() {

if (document.form1.xpixels.value < 500 document.form1.xpixels.value > 1010)
{
alert("Number of xpixels is not within boundary");
document.form1.xpixels.focus();
return (false);
}

return (true);

}

</script>

**************FORM******************

<form name="form1" onSubmit = "return checkform()" action="thankyou.html" method="post">
<!-- NUMBER TWO INPUT -->
<table width="311" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="259"> <font size="3">2. Number of X pixels:</font>
<input type="text" name="xpixels" size="4" maxlength="4" value="1000">
</td>
<td width="52">
<input type="button" value="Help" name="button3" target="new" onClick="Start('xpixel.html')"
onMouseOver="window.status='Explanation for parameter 2'; return true" onMouseOut="window.status=' '; return true">
</td>
</tr>
<tr>
<td width="259">
<input type="submit" name="Submit" value="Start Program" >
<input type="reset" name="Reset" value="Reset">
</td>
<td width="52">&nbsp;</td>
</tr>
</table>
</form>

5:11 pm on Dec 1, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


Yeah thanks Defanjanos,...i got ur sticky mail

Its all working now!

Now i get the more complicated task of adding in 18 different if clauses.

Wahey! At least i can progress now...

Cheers guys, and sorry for using up your time with a silly little newbie error!

Duncs

3:57 pm on Jan 7, 2004 (gmt 0)

New User

10+ Year Member

joined:Dec 1, 2003
posts:19
votes: 0


This is the final code that works:

[Incase anybody ever has the same problem, finds this forum post etc etc]

It always bugs me when the solution isn't posted on the forum

<html>
<head>

<title> yiyiyiyiy</title>

<script language="JavaScript">

//form verification

function checkform() {

if (document.form1.xpixels.value < 500 document.form1.xpixels.value > 1010)
{
alert("Number of xpixels is not within boundary");
document.form1.xpixels.focus();
return (false);
}

return (true);

}

</script>

<script language="JavaScript">

//JavaScript to open a pop-up window for the help buttons

function Start(page) {

OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=350,height=250");

}

</script>

</head>

<body>

<form name="form1" onSubmit = "return checkform()" action="thankyou.html" method="post">
<!-- NUMBER TWO INPUT -->
<table width="311" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="259"> <font size="3">2. Number of X pixels:</font>
<input type="text" name="xpixels" size="4" maxlength="4" value="1000">
</td>
<td width="52">
<input type="button" value="Help" name="button3" target="new" onClick="Start('xpixel.html')"
onMouseOver="window.status='Explanation for parameter 2'; return true" onMouseOut="window.status=' '; return true">
</td>
</tr>
<tr>
<td width="259">
<input type="submit" name="Submit" value="Start Program" >
<input type="reset" name="Reset" value="Reset">
</td>
<td width="52">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

2:53 am on Jan 8, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 8, 2004
posts:23
votes: 0


Just a quick note, you could still have used

onSubmit="return checkForm(this)"

and

function checkForm(oForm)

but instead of this:

oForm.xpixels

use this:

oForm.xpixels.value

The 'this' that you pass to checkForm is the same as your 'document.form1'. :)

I know this is a very late note to add on, but for any newbies reading, it's a little tip on object referencing. :)