Form submit

Hi,

Im trying to submit a HTML with JS form

does the return false; need “()”
should it be return true ? based on my js functions

any ideas?:slight_smile:

<form name=“Forders” action=“address.asp” method=“post” onSubmit=" nBlank(); cDefault(); numVal(); valEmail(); radioVal(); delDrops();checkText(this.card);return false; " >

Most of my js functions look llike this;

function cDefault()
{
if(document.Form.name.value == “000”)
{
alert(“alert text”);
return false;
}

False returned to the onsubmit attribute will prevent the form from being submitted. True will submit it to the server.

so how do i submit true on submit?

do my functions need an else return true?

or should on submit have return true instead of return false?

or is it something else?

when i submit return true the form submits - the problem is the field in my form that havent been filled out are meant to stop the form from submitting.

any help?:crazy:

If the function doesn’t return anything (which is in effect, undefined) then the form will still submit. You do not have to return true from the function.

The only thing that prevents the form from submitting is when you return false from the function.

Ok, so i guess my functions aren’t defining a false return??

my average function looks like this, its meant to send a false return??

any suggestions?

function cDefault() // default drop downs
{
if(document.Forders.aState.value == “000”)
{
alert(“Please select a State”);
return false;
}

Running multiple functions from the one submit event only leads to confusion.

Put them all in to a single function, and it will make better sense. Notice that the onsubmit attribute needs to return the result from the validate function to the form itself.


<form name="Forders" action="address.asp" method="post" onsubmit="return validateOrders(this)">


function validateOrders(form) {
    var isValid = true;

    if (nBlank() === false) {
        isValid = false;
    }
    ...
    if (checkText(form.card) === false) {
        isValid = false;
    }

    return isValid;
}

You can take some shortcuts, such as inverting the return from the function:


function validateOrders(form) {
    var isValid = true;

    if (!nBlank()) {
        ...
    }
    ...
    return isValid;
}

Or you can combine them together, but that then can become less understandable:


function validateOrders(form) {
    return (
        !nBlank() ||
        !cDefault() ||
        !numVal() ||
        !valEmail() ||
        !radioVal() ||
        !delDrops() ||
        !checkText(form.card)
    );
}

Or you could update the isValid variable in this manner here:


function validateOrders(form) {
    var isValid = true;
    
    isValid = isValid || !nBlank();
    isValid = isValid || !cDefault();
    ...
    isValid = isValid || !checkText(form.card);

    return isValid;
}

All of them work and do the same job, it’s just that some are easier to understand than others.

This is what ive done

do i need to ad valid =true variables to each one?

what do you suggest:)

function nBlank()// blank fields
{
if (document.Forders.fName.value.length ==0 ||document.Forders.fName.value == “Please enter your name”)
{
alert(“Please enter your name”);
return false;
}

if (document.Forders.address.value.length ==0 ||document.Forders.address.value == "Please enter your address" )
	{
	alert("Please enter your address");
	return false;
	}
if (document.Forders.suburb.value.length ==0||document.Forders.suburb.value == "Suburb" )
	{
	alert("Please enter your suburb");
	return false;
	}

}
function cDefault() // default drop downs
{
if(document.Forders.aState.value == “000”)
{
alert(“Please select a State”);
return false;
}
if(document.Forders.cCard.value == “000” )
{
alert(“Please choose your card type”);
return false;
}
if(document.Forders.emonth.value == “000” )
{
alert(“Please select card expiry month”);
return false;
}
if(document.Forders.eyear.value == “000” )
{
alert(“Please select card expiry year”);
return false;
}
if(document.Forders.basket.value == “000” )
{
alert(“Please make a basket choice”);
return false;
}
if(document.Forders.quan.value == “000” )
{
//alert(“You have chosen 1 basket”);
//return false;
}
}

function numVal() //number validation master
{
var pc = document.Forders.postcode.value;
if(isBlank(pc) || isNum(pc) || pc.length != 4)
{
alert(“Please enter a valid Post Code”);
document.Forders.postcode.focus();
}
var hp = document.Forders.homeP.value;
if(isBlank(hp) || isNum(hp) || hp.length !=10 || hp ==“XXXXXXXXXX”)
{
alert(“Please enter a valid Home phone number”);
document.Forders.homeP.focus();
}
var wp = document.Forders.workP.value;
if(isNum(wp) || wp.length !=10 )
{
alert(“Please enter a valid Work phone number”);
document.Forders.workP.focus();
}
var fp = document.Forders.faxP.value;
if(isNum(fp) || fp.length !=10)
{
alert(“Please enter a valid fax number”);
document.Forders.faxP.focus();
}
}
function isNum()// number validation is number
{
if(isNaN(document.Forders.postcode.value))
{
return false;
}
if(isNaN(document.Forders.homeP.value))
{
return false;
}
if(isNaN(document.Forders.workP.value))
{
return false;
}
if(isNaN(document.Forders.faxP.value))
{
return false;
}

}
function isBlank()//number validation isnt blank
{
if (document.Forders.postcode.value.length == 0 )
{
alert(“Please enter your postcode”);
return false;
}
if (document.Forders.homeP.value.length == 0 )
{
return false;
}
}

function valEmail()//Email validation
{
var x=document.forms[“Forders”][“eMail”].value
var at=x.indexOf(“@”);
var dot=x.lastIndexOf(“.”);
if (at<1 || dot<at+2 || dot+2>=x.length)
{
alert(“Not a valid e-mail address”);
return false;
}

}
function radioVal()// radio buttons
{
if (document.Forders.Group1[1].checked)
{
if (document.Forders.dStreet.value.length ==0 ||document.Forders.dStreet.value == “Street” )
{
alert ( “Please enter your delivery address” );
return false;
}
if (document.Forders.dSuburb.value.length ==0 ||document.Forders.dSuburb.value == “Suburb or Town” )
{
alert ( “Please enter your delivery suburb or town” );
return false;
}
if(document.Forders.Dpostcode.value.length == 0 || document.Forders.Dpostcode.value ==“XXXX” || isNaN(document.Forders.Dpostcode.value))
{
alert(“enter valid delivery postcode”);
return false;
}
}
}

function delDrops()
{
if (document.Forders.Group1[1].checked)
{
if(document.Forders.dState.value == “111”)
{
alert(“Please select a state for delivery”);
return false;
}
if(document.Forders.Dday.value == “111”)
{
alert(“Please select a date for delivery”);
return false;
}
if(document.Forders.Dmonth.value == “111”)
{
alert(“Please select a month for delivery”);
return false;
}
if(document.Forders.Dyear.value == “111”)
{
alert(“Please select a year for delivery”);
return false;
}
}
}
function checkText()// check box
{
if (document.Forders.card.checked)
{
if (document.Forders.message.value.length ==0 ||document.Forders.message.value == “Enter your personal message here”)
{
alert ( “Please enter your personal message in the text area” );
return false;
}

    }

}

//not valiadation code wax on wax off

function clearIt(field)
{
if(field.defaultValue==field.value)
{
field.value=“”;
}
else if(field.value==“”)
{
field.value=field.defaultValue;
}
}:frowning:

hold on… i had a brainwave lol

It looks like your functions are doing far too much. Can you explain what the function nBlank does without using the word “and” in the explanation? If not then you may want to simplify things further.

Aside from that though, if the nBlank function is supposed to check that the values are not blank, then you’ll want it to return true when things are good (no blank ones found) and you’ll want it to return false when a problem is found.

So yes, you would want to return true from the end of the function to indicate that no problem occurred.

so this is what im doing now it doesn’t seem to work though?

can you see where im going wrong.

onSubmit="validateForders(form); " >

function validateForders(form)//one ring to rule them all
{
var vAlid = true;

if (nBlank()=== false)
	{
		vAlid= false;	
	}
if (cDefault()=== false)
	{
		vAlid= false;
	}
	return vAlid;

}

function nBlank()// blank fields
{
if (document.Forders.fName.value.length ==0 ||document.Forders.fName.value == “Please enter your name”)
{
alert(“Please enter your name”);
return false;
}

if (document.Forders.address.value.length ==0 ||document.Forders.address.value == "Please enter your address" )
	{
	alert("Please enter your address");
	return false;
	}
if (document.Forders.suburb.value.length ==0||document.Forders.suburb.value == "Suburb" )
	{
	alert("Please enter your suburb");
	return false;
	}

}
function cDefault() // default drop downs
{
if(document.Forders.aState.value == “000”)
{
alert(“Please select a State”);
return false;
}
if(document.Forders.cCard.value == “000” )
{
alert(“Please choose your card type”);
return false;
}
if(document.Forders.emonth.value == “000” )
{
alert(“Please select card expiry month”);
return false;
}
if(document.Forders.eyear.value == “000” )
{
alert(“Please select card expiry year”);
return false;
}
if(document.Forders.basket.value == “000” )
{
alert(“Please make a basket choice”);
return false;
}
if(document.Forders.quan.value == “000” )
{
//alert(“You have chosen 1 basket”);
//return false;
}
}

There are multiple problems with that part.

Read back over the start of post #7 about it, and see if you can work it out.

okay so if

bear with me here

if the “slave” function alerts and changes the value of variable"valid" =false

then it would be returned to the “master” function as ==false.

which means when “master” is run the form doesn’t submit . (true or false haha)

But mine does submit… why is that?

I think that this is where you may be going wrong. Those slave functions should not change the results of things outside of themself. That way lies madness and defeat.

Instead, keep the functions self-contained, so that they only need to return the information that is required of them.

I thought they were

what do you mean self contained?

function nBlank()// blank fields
{
var valid = true;
if (document.Forders.fName.value.length ==0 ||document.Forders.fName.value == “Please enter your name”)
{
alert(“Please enter your name”);
valid= false;
}

if (document.Forders.address.value.length ==0 ||document.Forders.address.value == "Please enter your address" )
	{
	alert("Please enter your address");
	valid = false;
	}
if (document.Forders.suburb.value.length ==0||document.Forders.suburb.value == "Suburb" )
	{
	alert("Please enter your suburb");
	valid = false;
	}
	return valid;

}

wait… another brainwave

Ahh, I thought you were doing something that you aren’t.

Functions can change variables that are outside of themself, but still within their scope.

For example:


var foo = true;
function bar() {
    foo = false;
    // no variable is defined in here, so it changes foo in the outer scope
}
function baz() {
    var foo = true;
    // variable is defined in the function, so only the variable inside the function is changed
}

// foo is still true here

bar();
// foo is now false

baz();
// only the defined variable inside the function was assigned
// foo is still false

Don’t worry about fully understanding that though. It can take some time to get your head aronud it.

I got it in the end

Thanks again for for your help :thumbsup:
:smiley: