Lately, I made a project which includes a form to submit information. In the form, there was one Submit button, and another button was Upload. By “button”, I mean the element with markup <button></button>, not the <a> with a .btn class in Bootstrap.
There came a problem: when pressing button Upload, the form submitted itself. This wrong behavior was because I did not assign the button a type. This is how I wrote it:
According to W3Schools, there are 3 types of buttons: button, submit, and reset. By specifying them, you tell the browser how the button was supposed to behave.
- button: without a default behavior
- submit: to submit a form data via the action url
- reset: to reset form fields to initial values
Without any type specified, the button will behave as a submit button, and that’s why both buttons in my form submits data when clicked.
To fix, the Upload button should be:
Bottom line: never make a button without type.