• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[HTML] Form button issue and solution: Upload button behaves as a submit button

Modified on: July 4, 2020

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:

HTML

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:

HTML

Bottom line: never make a button without type.

Filed Under: Front-end Tagged With: html

Recent posts

WordPress: Create custom post type programmatically

[WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

Mangools Review: A Productive SEO tool for The Affiliates

Reader Interactions

You are here: Home / Front-end / [HTML] Form button issue and solution: Upload button behaves as a submit button

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

FOLLOW MY BLOG

Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.