I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>. I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.

To be more clear, i want this code:

<form action="" method="POST">
    <button onclick="alert('hi!')">Button</button>
    <br>
    <input type="submit" value="submit"/>
</form>

to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>. I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.

To be more clear, i want this code:

<form action="http://www.google." method="POST">
    <button onclick="alert('hi!')">Button</button>
    <br>
    <input type="submit" value="submit"/>
</form>

to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".

• javascript
• html

• Esailija, it depends on a browser i think because i tested in in Chrome before i posted it in here and it redirects me to Google all right. – Alehar Commented Jun 27, 2012 at 10:01
• Yes I just realized that, different browsers can assume different type because you didn't specify it – Esailija Commented Jun 27, 2012 at 10:02
• possible duplicate of HTML button to NOT submit form – Jayarathina Madharasan Commented Mar 25, 2015 at 16:23

3 Answers 3

Specify type="button":

<button type="button" onclick="alert('hi!')">Button</button>

From the linked article:

This [submit] is the default if the attribute is not specified

Try this..

onclick="alert('hi!'); return false;"

With jQuery use a span rather than an input, put use the .button call and then set a click event.