Avatar of Michael Sterling
Michael Sterling
Flag for United States of America asked on

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?
ReactJavaScript* ReactJS

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
Chris Stanyon

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.
Michael Sterling

ASKER
@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?
Michel Plungjan

Funny you should ask... Just revisited this a few days ago :)


https://www.google.com/search?q=submit+onclick+mplungjan+BrendanEich

Your help has saved me hundreds of hours of internet surfing.
fblack61
Michael Sterling

ASKER
@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?
Chris Stanyon

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.
Michael Sterling

ASKER
@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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
leakim971

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
Michael Sterling

ASKER
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.
Michel Plungjan

@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

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes