Script processing form when it's not supposed to

[Shpigford]

I have a snippet of javascript to check and make sure all the fields in a form are filled in. If they aren't then it shows an alert box telling you to put something in that form. If all the fields are filled in then it submits the form. That piece of code is this:

 
function checkFields() {
var errors = "no";
if(document.street_team.email.value == "") {
    alert("Please enter an e-mail address..");
	errors = "yes";}
if(document.street_team.name_first.value == ""){
    alert("Please enter your first name.");
	errors = "yes";}
if(document.street_team.name_last.value == ""){
    alert("Please enter your last name.");
	errors = "yes";}
if(document.street_team.loc_state.value == ""){
    alert("Please enter your state.");
	errors = "yes";}	
if(document.street_team.loc_city.value == ""){
    alert("Please enter your city.");
	errors = "yes";}	
if(errors != "yes"){
    document.street_team.submit();}	
	}

Then i used a button to start the script. That code is this:

<button onClick="checkFields()">Join</button>

The problem is that if you don't have something filled in and the alert box pops up, once you click "ok" it still processes the form. Any ideas on how to keep it from doing that?

[JVLB]

Probably a little better way to do this is to call your function with the form's onsubmit event and return false if the form isn't completed. That should prevent submission. You might also want to consider using if/else/if statements to prevent the interpreter from having to test each if statement after one is found to be true. Only if the form passes all the tests should the function return true, allowing submission to proceed. This has the advantage of allowing those with JavaScript disabled to submit the form (albeit, with potential ommissions).

Call the function with: onsubmit="return checkFields();" in the form tag to assure that the return value delivered by the function determines if submission proceeds.

[ponticelli]

Instead of this

if(errors != "yes"){
    document.street_team.submit();}

try

if(errors != "yes"){ return true;} else { return false;}

To prevent the submit action, just return FALSE;

[Shpigford]

Great. Problem solved!

[adios]

Actually...JVLB's solution was the correct one. JavaScript should supplement your page's behavior, never - if feasible - make its functioning impossible without JavaScript.