Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide

Question about which is the correct style of JavaScript to pass to FORM's onSubmit attribute

Question posted by: Sean Dockery (Guest) on July 23rd, 2005 10:42 PM
Which is the following is correct?

a) <form ... onSubmit="return checkData()">

b) <form ... onSubmit="return checkData();">

c) <form ... onSubmit="checkData()">

d) <form ... onSubmit="checkData();">

....where checkData is a JavaScript function that returns a true or false
value.

It seems that Internet Explorer accepts all of the above, but I'm not
taking that to mean that all are correct.

I've attempted to search the W3 web site on the terms form and onsubmit,
but the documentation refers to the attribute value as being an intrinsic
event (without giving any examples). The archived mailing lists contain
messages which demonstrate all of the options that I've provided above. I
gave up after the forth page of search results because of the number of
conflicting examples.

Does anyone know which is correct?

Thanks for your precious time.



Michael Winter's Avatar
Michael Winter
Guest
n/a Posts
July 23rd, 2005
10:42 PM
#2

Re: Question about which is the correct style of JavaScript to pass to FORM's onSubmit attribute
On Mon, 15 Nov 2004 15:51:19 GMT, Sean Dockery <sdockery@securac.net>
wrote:
[color=blue]
> Which is the following is correct?
>
> a) <form ... onSubmit="return checkData()">
>
> b) <form ... onSubmit="return checkData();">
>
> c) <form ... onSubmit="checkData()">
>
> d) <form ... onSubmit="checkData();">
>
> ...where checkData is a JavaScript function that returns a true or false
> value.[/color]

All of them are correct in that they will result in the call of checkData.
However, only a) and b) will actually affect whether the form is submitted.

The content of an intrinsic event attribute becomes the body of an
anonymous function:

/* Note that IE doesn't pass an event argument. It uses a global
* variable of the same name. Either way, you can still use:
*
* on<event>="myFunction(event)"
*
* to access the event object.
*/
formElement.onsubmit = function(event) {
/* Value in onsubmit attribute */
};

Obviously, if you don't include a return statement, no value will actually
be returned when this anonymous function exits.

With regards to the semicolon, the same rules apply as normal: semicolons
are generally optional, but it's good practice to include them. If you had
two or more statements/expressions to evaluate, a semicolon would be
necessary to separate them.

The final point I like to make is that it's simpler to pass a reference to
the FORM when it is called, rather than obtain one later. That is:

<form ... onsubmit="return checkData(this);">

function checkData(form) {
/* You can now use form, rather than
* document.forms['formName']
*/
}
[color=blue]
> It seems that Internet Explorer accepts all of the above, but I'm not
> taking that to mean that all are correct.[/color]

As I said, they are all syntactically correct, but the second two are
probably not what you want.

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Sean Dockery's Avatar
Sean Dockery
Guest
n/a Posts
July 23rd, 2005
10:42 PM
#3

Re: Question about which is the correct style of JavaScript to pass to FORM's onSubmit attribute
Thanks, Michael. Your response was extremely helpful, and exactly what I
was looking for.

"Michael Winter" <M.Winter@blueyonder.co.invalid> wrote in message
news:opshiklmsxx13kvk@atlantis...[color=blue]
> On Mon, 15 Nov 2004 15:51:19 GMT, Sean Dockery <sdockery@securac.net>
> wrote:
>[color=green]
>> Which is the following is correct?
>>
>> a) <form ... onSubmit="return checkData()">
>>
>> b) <form ... onSubmit="return checkData();">
>>
>> c) <form ... onSubmit="checkData()">
>>
>> d) <form ... onSubmit="checkData();">
>>
>> ...where checkData is a JavaScript function that returns a true or false
>> value.[/color]
>
> All of them are correct in that they will result in the call of
> checkData. However, only a) and b) will actually affect whether the form
> is submitted.
>
> The content of an intrinsic event attribute becomes the body of an
> anonymous function:
>
> /* Note that IE doesn't pass an event argument. It uses a global
> * variable of the same name. Either way, you can still use:
> *
> * on<event>="myFunction(event)"
> *
> * to access the event object.
> */
> formElement.onsubmit = function(event) {
> /* Value in onsubmit attribute */
> };
>
> Obviously, if you don't include a return statement, no value will
> actually be returned when this anonymous function exits.
>
> With regards to the semicolon, the same rules apply as normal: semicolons
> are generally optional, but it's good practice to include them. If you
> had two or more statements/expressions to evaluate, a semicolon would be
> necessary to separate them.
>
> The final point I like to make is that it's simpler to pass a reference
> to the FORM when it is called, rather than obtain one later. That is:
>
> <form ... onsubmit="return checkData(this);">
>
> function checkData(form) {
> /* You can now use form, rather than
> * document.forms['formName']
> */
> }
>[color=green]
>> It seems that Internet Explorer accepts all of the above, but I'm not
>> taking that to mean that all are correct.[/color]
>
> As I said, they are all syntactically correct, but the second two are
> probably not what you want.
>
> [snip]
>
> Hope that helps,
> Mike
>
> --
> Michael Winter
> Replace ".invalid" with ".uk" to reply by e-mail.[/color]



 
Not the answer you were looking for? Post your question . . .
189,324 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors