0

I'm wondering the differences are between calling a JavaScript function in these different ways from a form.

Method 1

<form onsubmit="someFunction()">

Method 2

<form onsubmit="JavaScript:someFunction()">

Method 3

<form onsubmit="return someFunction()">

I couldn't find any mention of the onsubmit attribute in any HTML5 form docs (only a little info on some HTML4 docs). Should I not use it? Would it be better to use onclick on the submit button?

apokaliptis
  • 424
  • 1
  • 4
  • 12
  • 3
    Ideally you shouldn't do *any* of those things. – Pointy Apr 28 '21 at 18:49
  • Regarding the code you call "method 2" you need a better explanation than what is fiven For example :: if "someFunction" was written in say v.b.s., you'd have to write `
    ` in order to execute it, or fail gracefully if the client UA doesn't support it.
     – Bekim Bacaj Apr 28 '21 at 19:38
  • @BekimBacaj — Firefox and Chrome do not fail gracefully with that code. They both throw Uncaught SyntaxError: unexpected token: identifier (since you have a label `VBScript:` then an identifier `Call` and then a space followed by another identifier `someFunction`) – Quentin Apr 28 '21 at 20:46
  • @Quentin to bad firefox or chrome didn't even exist when this was a standard, they treat it as a label not as a language definition they are to green for that. Firefox didn't know until recently that they should register element events with `null` and did it with `""` lol – Bekim Bacaj Apr 29 '21 at 06:48
  • @BekimBacaj — So what you're saying is that there was once a standard (but you can't find this standard to prove it) where intrinsic event attributes behaved differently, and if you write code which conforms to that standard then it will fail gracefully but only if the end user has a browser from over **eighteen years** ago? – Quentin Apr 29 '21 at 07:17
  • @Quentin, I'm not saying that at all. And yes people know history, not because they read it, but because they are old enough in the field to have been there when it came by, and watch it fade into obscurity. p.s.: You are still supposed to declare the scripting language in your script tag even today, aren't you? Why do you think that is? – Bekim Bacaj Apr 29 '21 at 11:42
  • @BekimBacaj — Assuming you are right about that being old behaviour, there is a lot of different about how something was treated historically and how it is treated now. You've been presenting this as the *current* state of things and not making it clear that it is outdated information that no longer applies. – Quentin Apr 29 '21 at 11:47
  • @BekimBacaj — "You are still supposed to declare the scripting language in your script tag even today, aren't you?" — No. You aren't. If a ` – Quentin Apr 29 '21 at 11:49
  • @BekimBacaj — Here's the HTML 4 spec for [specifying the default scripting language](https://www.w3.org/TR/html4/interact/scripts.html#default-script). It uses a `` tag. None of the examples of using `on*` attributes specify the language with any kind of prefix. – Quentin Apr 29 '21 at 11:51

1 Answers1

4
onsubmit="someFunction()"

Calls a function

onsubmit="JavaScript:someFunction()"

The same, but with a completely useless label. The person who wrote it probably saw a javascript: scheme URL in an href attribute (which is a terrible idea unless you are explicitly writing a bookmarklet) and fell into a cargo cult, not understanding that on* attributes expect their values to be JavaScript and not a URL.

onsubmit="return someFunction()"

The same, but the submit event handler function returns whatever the function returns. If it returns false it prevents the default behaviour of the form submission.

I couldn't find any mention of the onsubmit attribute in any HTML5 form docs

It is defined in general terms here.

Should I not use it?

Intrinsic event attributes violate the principle of separation of concerns and have some really unintuitive scoping rules while also depending on the functions called from them to be globals.

They are best avoided.

Modern JS would bind the event handler using addEventListener and prevent the default behaviour of the form submission with preventDefault

Would it be better to use onclick on the submit button?

No. Form submission can be triggered through other mechanisms, such as pressing enter in a text input. While this might trigger a click event on the submit button, it is better to say what you mean.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335