24

It's not like I haven't googled it... But still I couldn't understand when onsubmit is used and when onclick is used?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
user3636516
  • 305
  • 1
  • 2
  • 10
  • 2
    Click could be anything, you can click pretty much any element. On submit is for a form, and happens when a form is submitted. – dcclassics May 20 '14 at 14:26
  • 4
    If you hover over the `onclick` and `onsubmit` tags, it will give you a definition for each. – kei May 20 '14 at 14:26

5 Answers5

47

They're two completely separate events.

onclick events fire when the user uses the mouse to click on something.

onsubmit events fire when a form is submitted. The origin of this event can sometimes be traced back to an onclick (like clicking the "submit" button) but it can also come from a keyboard event (like pressing enter).

This implies that using onclick on a submit button on a form might miss some cases that an onsubmit on the form would catch.

There are many other kinds of events such as: onload for loading resources such as scripts or images and onkeydown for detecting key presses on the keyboard.

radu florescu
  • 4,315
  • 10
  • 60
  • 92
Halcyon
  • 57,230
  • 10
  • 89
  • 128
  • So `onsubmit` is fired for both real form submissions and AJAX forms that have a submit button? – hippietrail Apr 04 '15 at 12:31
  • 2
    onsubmit is an event that can fire on a form. You can optionally `event.preventDefault()` and do an ajax call. There isn't anything special about _ajax_ forms. – Halcyon Apr 05 '15 at 01:11
  • More different is their behavior. `onsubmit` can't send button value but `onclick` can. Read more at https://stackoverflow.com/a/1709352/128761 – vee Feb 11 '21 at 10:11
9

OnSubmit is used on a form, and indicates that the information is to be submitted to the server at this point unless you return false.

OnClick is used on anything, and indicates that it was clicked, offering no other context to the intention of the event at all.

scragar
  • 6,764
  • 28
  • 36
4

Onclick is the event where a control/object/pretty much anything, is clicked on. Onsubmit is the event where a form is submitted.

For example, lets say you have a registration form.

You can have the OnClick event of the "Submit" button to bring up an alert that says "Are you sure these details are correct?", and clicking "Ok" there can trigger the OnSubmit event, which would submit the form data to wherever you want it to go.

Sainath Krishnan
  • 2,089
  • 7
  • 28
  • 43
1

In react as an example, onClick works on every element and it doesn't capture the full form event like "required".

     <form >
          <input type="text" placeholder="Enter Name" required />
          <button type="submit" onClick={myHandler} > Submit</button>
      </form>

In the case above, myHandler will execute without regarding the "required" property.

onSubmit, on the other hand, can capture all form events, for example, "required", but has to be applied to the form element itself.

      <form onSubmit={myHandler}>
          <input type="text" placeholder="Enter Name" required />
          <button type="submit"> Submit</button>
      </form>

Now, the required property works fine.

Adesoft
  • 305
  • 3
  • 3
-1

onsubmit reference to form element and this event occurs when the form is submitted.

http://reference.sitepoint.com/html/event-attributes/onsubmit

onclick reference to elements such as div, li etc, this event occurs when user clicks the element that attribute click is applied to.

http://www.sitepoint.com/web-foundations/onclick-html-attribute/

user3654229
  • 1