Javascript image onSubmit() Help!

[ToxinMan]

Hey there!
I was wondering if anyone could give me some help on my javascript onSubmit problems!

What im trying to do here is that they enter their informtion (username,firstname,lastname,pass,email,gender) and it gets vaildiated in javascript to check if they entered there information correctly! But the problem is that i can't get it to submit() correctly with a javascript and a image?

Also i want it so that when the javascript validation fails, it remains on the same page

here is what iv got so far:

This is in the header:

PHP Code:
<script type="text/javascript">
function check(){
var uname = document.formed.username.value;
var fname = document.formed.firstname.value;
var lname = document.formed.lastname.value;
var robot = document.getElementById("one");
var pass = document.formed.password.value;
var pass2 = document.formed.password2.value;
var email = document.formed.email.value;

if(uname == ""){
alert("Please enter a username!");
return false;}
if(fname == ""){
alert("Please enter your first name!");
return false;}
if(lname == ""){
alert("Please enter your last name!");
return false;}
if (pass!== pass2){
alert("Your passwords do not match!");
return false;}
if (pass == ""){
alert("Please enter a password!");
return false;}
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email)== false){
alert("Invalid e-mail address!");
return false;}
if(robot.checked == true){
alert("No Robots Allowed!");
return false;}

document.formed.method="post" ;
document.formed.action="signup_work.html";
document.formed.submit();

}
</script>

And this is my form:

PHP Code:
<form name="formed" >
Username:
<input name="username" type="text" size="30" maxlength="20"><br/>
First Name:
<input name="firstname" type="text" size="30" maxlength="20"><br/>
Last Name:
<input name="lastname" type="text" size="30" maxlength="20"><br/>
Password:
<input name="password" type="password" size="30" maxlength="10"><br/>
Confirm Password:
<input name="password2" type="password" size="21" maxlength="10"><br/>
Email:
<input name="email" type="text" size="30" maxlength="40"><br/>
Gender:

<input id="one" name="gender" type="radio" value="robot" checked="checked"> Robot <br/>
<input name="gender" type="radio" value="male"> Male <br/>
<input name="gender" type="radio" value="female"> Female <br/><br/>
<a href="javascript: check();"><img src="http://www.example.com/siteimages/index/submit.jpg" width="74" height="20" border="0"></a>
</form>

Thanks heaps in advance!

[edited by: engine at 9:37 am (utc) on Jan. 28, 2008]
[edit reason] examplified [/edit]

[Achernar]

The proper method is to use <input type="image"> for your submit button, and to add
onsubmit="return check();"
in <form ...>

If the form contains error, and you don't want to submit it, simply return false in check(), else, return true.

[edited by: Achernar at 2:12 pm (utc) on Jan. 28, 2008]

[rocknbil]

A few other grains that might be helpful.

In your JS, you can remove the redundant "return false" and just put it at the bottom of the check() function. The reason should become clear in a moment.

Secondly, this is going to give a series of annoying alerts - you can loop through them and break from the loop on error, or build a string with all of them and alert once. I prefer the string:

var errmsg = '';
errmsg += "\nPlease enter a username!";
}
if(fname == ""){
errmsg += "\nPlease enter your first name!";
}
..........

Note the newlines, this will help format the final message:

if (errmsg!= '') { alert("you have the following errors in your submission: " + errmsg); }
else { form.submit(); }
return false;

You want to always return false so it doesn't submit twice, once for the submit button and once from the Javascript.

Note the bolded reference to "form" above. You can simplify it even further by passing a reference to the form and storing it in a variable. This won't work with a link, but if you do this

<fomr name="formed" onSubmit="check(this);">

function check(form) {
........

Then you can use the variable you've named "form" instead of repetitive document.formname references.

var uname = form.username.value;
var fname = form.firstname.value;
form.submit();

Last, the explanation as to why your submit link normally won't work: an anchor is not a form object. It doesn't actually submit anything. This is why input type="image" is required. Another trick is to use a normal submit button, and style your button with a background image.

<input type="submit" style="background:url(yourimage.gif);" value="">

This is important because if Javascript is disabled, it won't submit unless the user thinks to hit the return key while not focused on a textarea field.