Form Submit problem - Dev Articles

Dev Articles Community Forums Sponsor:

Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

September 16th, 2005, 03:54 AM

imparator

Registered User

Join Date: Sep 2005

Posts: 13

Time spent in forums: 2 h 12 m 37 sec
Reputation Power: 0

Form Submit problem

Hi, Im trying to validate a form using JAVASCRIPT, and although its validating (my error message is popping up) its still submits the form (even when its not supposed to)

this is my HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<title>Employer Registration Form</title>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="../validate.js"></script>
</head>
<body>
<div class="img">
<img src="emp_reg.png" alt="logo" />
</div>
<!--START OF HTML FORM-->
<form name="emp_reg" action="http://yallara.cs.rmit.edu.au/~aciftcio/cgi-bin/empreg.cgi" method="post">
<div class="table">
<table align="center" cellspacing="6">
<!--Company Name-->
<tr><td>Compny Name:</td><td><input type="text" name="company_name" /></td></tr>
<!--ABN-->
<tr><td>ABN:</td><td><input type="text" name="ABN" /></td></tr>
<!--Company Type-->
<tr><td>Company Type:</td><td>
<input type="radio" name="Company_Type" value="Government" /> Government
<input type="radio" name="Company_Type" value="Private" /> Private
<input type="radio" name="Company_Type" value="Charity" /> Charity
</td></tr>
<!--Address-->
<tr><td>Address:</td><td><input type="text" name="address" /></td></tr>
<!--Contact Person-->
<tr><td>Contact Person:</td><td><input type="text" name="contact_person" /></td></tr>
<!--Phone Number-->
<tr><td>Phone Number:</td><td><input type="text" name="phone_number" /></td></tr>
<!--Contact Email-->
<tr><td>Contact Email:</td><td><input type="text" name="email" /></td></tr>
<!--Username-->
<tr><td>Username:</td><td><input type="text" name="username" /></td></tr>
<!--Password-->
<tr><td>Password:</td><td><input type="password" name="password" /></td></tr>
</table>
<!--Submit/Reset Buttons-->
<p><input type="Submit" name="submit" value=Sign-up onclick="validate_form ( )" /><input type="reset" name="reset" value=Reset /></p>
<p style="font-weight:normal">Already regiestered? Login using the link below</p>
<p><a href="index.html">Log-in</a></p>
</form>
<!--END OF HTML FORM-->
</div>

</body>
</html>

AND this is my javascript:

Code:

function validate_form ( )
{
	valid = true;

        	if ( document.emp_reg.company_name.value == "" )
        	{
                alert ( "Please fill in the 'Company Name' box." );
                valid = false;
        	}
			

return valid; 
}

Any help would be appeciated!

September 16th, 2005, 08:06 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

One solution could be to change your SUBMIT to a regular BUTTON... then modify the last line of your function to be: if (valid) document.emp_reg.submit()
Downside, when a user pressed ENTER in the form, the form doesn't submit... they have to actualyl click the button.

I believe you may be able to keep your function the way it is and call it ONSUBMIT of the FORM tag... call your function there... (and take the onclick off of the submit button)...
I'm not positive this will work the same way in all browsers.

September 17th, 2005, 12:44 AM

imparator

Registered User

Join Date: Sep 2005

Posts: 13

Time spent in forums: 2 h 12 m 37 sec
Reputation Power: 0

Hi, thanks for your advice. I tried both suggestions but still cant get it to work. - The alert box does popup however straight after you click ok the form ia submitted - even if the field is empty

September 18th, 2005, 12:33 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 541

Time spent in forums: 1 Week 1 Day 2 h 15 m 6 sec
Reputation Power: 3

form submit

MadCowDzz has essentially already suggested this, so you must not have understood what he was getting at, but if you change the submit button to an input button

Code:

<input type="button" name="submit" value="Sign-up" onclick="validate_form();" />

and change the script to this

Code:

<script type="text/javascript">
function validate_form(){
  if (document.emp_reg.company_name.value == ""){
    alert("Please fill in the 'Company Name' box.");
  } else {
  document.emp_reg.submit;
  }
}
</script>

I think it will work the way you want it to. This uses if-else instead of testing for the "valid" variable's value, thereby eliminating one source of possible confusion. Note* the variable was only being used to hold the value for the "return". Because the function does not return anything I don't think it's needed.

September 19th, 2005, 05:29 AM

MichaelSoft

Contributing User

Join Date: Aug 2005

Location: The Netherlands

Posts: 121

Time spent in forums: 17 h 20 sec
Reputation Power: 3

The main reason the form is still submitted is that you don't pass the return value back to the brower!
Your pop-up shows the user that something is wrong, but the browser does not know that. Basically returning false to the browser will stop the action right there and then, returning true (or nothing) will continue the action as though no script was defined.

In your original example, I'm sure the following will work:
onclick="return validate_form();"

I want to recommend MadCowDzz remark also:
Put it in the <form tag as: onsubmit="return validate_form();"
(again, use the 'return' otherwise the browser will still submit it)

October 7th, 2005, 05:32 AM

imparator

Registered User

Join Date: Sep 2005

Posts: 13

Time spent in forums: 2 h 12 m 37 sec
Reputation Power: 0

thanks very much to all of you, if fixed the problem

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: