Form is submitted when I click on the button in form. How to avoid this?
From the fine HTML5 specification:
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".
And a <button type="submit">
submits the form rather than behaving like a simple <button type="button">
push-button.
The HTML4 spec says the same thing:
type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:
submit
: Creates a submit button. This is the default value.reset
: Creates a reset button.button
: Creates a push button.
So your <button>
elements:
<button class="btn">Button_1</button>
<button class="btn">Button_2</button>
are the same as these (in compliant browsers):
<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>
and any time you hit one of those buttons you'll submit your form.
The solution is to use plain buttons:
<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>
Some versions of IE default to type="button"
despite what the standard says. You should always specify the type
attribute when using a <button>
just to be sure that you will get the behavior you're expecting.