- React
- JavaScript
- Reactjs
What are the pros and cons of using a form submit vs an onClick and vise versa?
React newbie question: What are the advantages/disadvantages of using a form to submit a click action vs. using a button to handle a click event? Are there links or articles that compare the two?
Hey Michael,
Bottom line is that they're 2 different, but often related things and can be used for 2 different purposes. If you have a form with some data and you just want to send that to the server, then the form submit is probably easier. If you have a button that you want to trigger an action, then use a click handler. It wouldn't make any sense to have a form with a submit button to hide a div on the screen - you'd just have a button with a click handler.
You can of course use a click handler on a button to submit a form, and you'd often do this if you need to do something other than just send the form (manipulate the data in some way). You can of course submit data to your server without a form by building a data objet and sending that.
It's not really about pros and cons, as you'll often use both. Which you use will just depend on what you want to happen when you click that button.
Bottom line is that they're 2 different, but often related things and can be used for 2 different purposes. If you have a form with some data and you just want to send that to the server, then the form submit is probably easier. If you have a button that you want to trigger an action, then use a click handler. It wouldn't make any sense to have a form with a submit button to hide a div on the screen - you'd just have a button with a click handler.
You can of course use a click handler on a button to submit a form, and you'd often do this if you need to do something other than just send the form (manipulate the data in some way). You can of course submit data to your server without a form by building a data objet and sending that.
It's not really about pros and cons, as you'll often use both. Which you use will just depend on what you want to happen when you click that button.
@Chris: So using a button click handler for, say, logging/signing into an application is more appropriate than using a form submit since you'd be returning something to the application and then acting upon that information as apposed just sending some data to the server and then not performing a real "action" (i.e.: a redirect etc.) with the result? Though both methods could be used in this case obviously?
Funny you should ask... Just revisited this a few days ago :)
https://www.google.com/search?q=submit+onclick+mplungjan+BrendanEich
@Michel: So would you say that in the general sense, if the validation is more than just, "is there something there" (in an input for example) you would then lean more towards handling the click event of the button? Or even in that scenario, you would still handle more in depth validation in the submitting of the form?
Hey Michael,
Careful with that SO link - It's 9 years old and a lot has changed since then. Take it with a pinch of salt.
With regard to a login form. Think about what it does. It takes input from a User and then posts that info to the server. The most straight forward way is to have a form and then submit it.
Seeing as though you're taking about event handlers and React, then you'll likely be handling the data using Javascript instead of a standard HTTP request. A standard submit button will trigger the submit event. Usually, you'd then intercept the submit() event with an event handler so that you can deal with the data and make the request to your server (for example, making an AJAX request). With a non-submit button, you'd intercept the click() event instead of the submit() event - either way, you're writing code to response to an event.
Careful with that SO link - It's 9 years old and a lot has changed since then. Take it with a pinch of salt.
With regard to a login form. Think about what it does. It takes input from a User and then posts that info to the server. The most straight forward way is to have a form and then submit it.
Seeing as though you're taking about event handlers and React, then you'll likely be handling the data using Javascript instead of a standard HTTP request. A standard submit button will trigger the submit event. Usually, you'd then intercept the submit() event with an event handler so that you can deal with the data and make the request to your server (for example, making an AJAX request). With a non-submit button, you'd intercept the click() event instead of the submit() event - either way, you're writing code to response to an event.
@Chris: Yeh I did see that and took that into consideration. I was mostly focused on the responses from yesterday that were at the end. So I'm still unsure at this point of which is better or best practice as it would be. It seems as though they are equal? Maybe my question should be: When should you use a form submit to handle the click event vs. a button onClick?
When should you use a form submit to handle the click event vs. a button onClick?
If you have a form containing some <input> elements and a submit button (<input type="submit" value="Go"> / <button type="submit">Go</button>)
If you need a button ( or any element ) to do anything else, use the click() event handler, because you won't have the submit() event.
maybe a day, what you will display on the screen would be result of hundred components
this hundred components would NOT be in a form
it make more sense to have a button do send chosen date from one hundred components
button -> action (get this, do that, check this, get back that, save this, ...)
submit -> send form data
this hundred components would NOT be in a form
it make more sense to have a button do send chosen date from one hundred components
button -> action (get this, do that, check this, get back that, save this, ...)
submit -> send form data
Chris/Michel/leakim971: Thanks to you all for helping me understand this concept better. I think you all said the same thing to some extent. I think Chris' explanation was the most clear to me. Collectively they all make the picture [more] clear to me.
@chris - the whole post is interesting and the only new thing since then it s the form attribute on a submit button. I’d still always use the submit event and never a submit button’s click event. I have yet to be in a situation where the click event of a submit button was interesting. Different of curse from a click event on type=button
Premium Content
You need an Expert Office subscription to comment.Start Free Trial