Jump to content

How To Make A Form Do A Function


Imoddedu

Recommended Posts

<html><head><title>Register Test</title></head><body><form action="page2.php" method="post" onsubmit="return validate_form(this)">Username:<input type="text" name="Username" /><br />Password:<input type="password" name="Password" /><br />Year I was born: <select name="Age"><option>2009</option><option>2008</option><option>2007</option><option>2006</option><option>2005</option><option>2004</option><option>2003</option><option>2002</option><option>2001</option><option>2000</option><option>1999</option><option>1998</option><option>1997</option><option>1996</option><option>1995</option><option>1994</option><option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option></select><input type="submit" value="Submit" /><br /></form><script type="text/javascript">function validate_form() {var u = form.Username.value;var p = form.Password.value;var a = form.Age.valueif ((u == "")||(p == "")||(a == "")) {	alert("Please fill out the desired fields");	return false;	}if ((u < "3")||(u > "10")) {	alert("Username is not valid length");	return false;	}if ((p < "3")||(p > "10")) {	alert("Password is not valid length");	return false;	}if ((a >= "1997")) {	alert("You are too young");	return false;}</script></body></html>

What is the problem with the code? I tried looking at it but still nothing I can come up with.

Link to comment
Share on other sites

This line is incorrect:

if ((u < "3")||(u > "10")) {	alert("Username is not valid length");	return false;}

You can't use comparative operators on strings (well, you can but it usually gives very strange results, I'm not sure if it works in Javascript).What you're trying to do is this:

if ((u.length < 3)||(u.length > 10)) {	alert("Username is not valid length");	return false;}

The length property of a string returns an integer indicating the amount of characters contained in the string.The same goes for the password, and remove the "quotes" from "1997"

Link to comment
Share on other sites

if ((u == "")||(p == "")||(a == "")) {

on that code, instead of "" can i just put the word null?

I'm not sure it would work, since you're evaluating strings. Leave that part as it is.
Link to comment
Share on other sites

Actually, there is yet another critical mistake:

function validate_form() {var u = form.Username.value;var p = form.Password.value;var a = form.Age.value

The variable form is not defined.

Link to comment
Share on other sites

You're calling the function like this:onsubmit="return validate_form(this)"That means validate_form() is expecting an object to be passed to it. So change the function definition to this:function validate_form(form) {The object referenced by the word this is now referenced by the word form.

Link to comment
Share on other sites

<html><head><title>Register Test</title></head><body><form action="" method="" onsubmit="return validate_form(form)">Username:<input type="text" name="Username" /><br />Password:<input type="password" name="Password" /><br />Year I was born: <select name="Age"><option>2009</option><option>2008</option><option>2007</option><option>2006</option><option>2005</option><option>2004</option><option>2003</option><option>2002</option><option>2001</option><option>2000</option><option>1999</option><option>1998</option><option>1997</option><option>1996</option><option>1995</option><option>1994</option><option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option></select><input type="submit" value="Submit" /><br /></form><script type="text/javascript">function validate_form(form) {var u = form.Username.value;var p = form.Password.value;var a = form.Age.valueif ((u.length == "")||(p.length == "")||(a == "")) {	alert("Please fill out the desired fields");	return false;	}if ((u.length < 3)||(u.length > 10)) {	alert("Username is not valid length");	return false;	}if ((p.length < 3)||(p.length > 10)) {	alert("Password is not valid length");	return false;	}if ((a >= "1997")) {	alert("You are too young");	return false;}</script></body></html>

That is what I have so far, but it still does not work. There aren't any popup boxes or anything.

Link to comment
Share on other sites

you were missing the function closing bracket.the script needed to know what form it was acting on. so i added a form id and passed the id value as a argument to the function. i then used that id to get the element through the dom method. also i changed the way the function returned a value to the way every form validation example script i've seen does it, it may of canceled the default action anyways i'm not to sure, but i'm pretty sure how i changed it works. there should be a way to get it to work using "this" so you don't have to make ids and pass a argument. but i need to work on my homework and its FRIDAY NIGHT yea! i only tested it to the point where i got one pop up box to show. i haven't wrote a validation script yet, but if i do i think i would avoid pop ups and instead use dom(document object model) and related elements, which might be something to look into.

<html><head><title>Register Test</title></head><body><form id ="thisForm" action="" method="" onsubmit="return validate_form('thisForm')">Username:<input type="text" name="Username" /><br />Password:<input type="password" name="Password" /><br />Year I was born: <select name="Age"><option>2009</option><option>2008</option><option>2007</option><option>2006</option><option>2005</option><option>2004</option><option>2003</option><option>2002</option><option>2001</option><option>2000</option><option>1999</option><option>1998</option><option>1997</option><option>1996</option><option>1995</option><option>1994</option><option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option></select><input type="submit" value="Submit" /></form><script type="text/javascript">function validate_form(id) {var form = document.getElementById(id);var u = form.Username.value;var p = form.Password.value;var a = form.Age.value;var returnvalue = true;if ((u.length == "")||(p.length == "")||(a == "")) {	alert("Please fill out the desired fields");	returnvalue= false;	}if ((u.length < 3)||(u.length > 10)) {	alert("Username is not valid length");	returnvalue= false;	}if ((p.length < 3)||(p.length > 10)) {	alert("Password is not valid length");	returnvalue = false;	}if ((a >= 1997)) {	alert("You are too young");	returnvalue= false;}return returnvalue;}

Link to comment
Share on other sites

Fixing the closing brace would have been enough. It's often useful for a form to have an id, but an id is not necessary for a simple task like this. Consistent use of the this keyword makes for shorter, cleaner code.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...