bootstrap html click button without submit form

Question

Here is my code

        <form class="form-horizontal">

          <div class="control-group">
            <div class="controls">
              <button onclick="javascript:add_user_group(2);" class="btn">add</button>
            </div>
          </div>

        <table id="users-table" class="table table-striped" >
          <thead>
            <tr>
              <th>User Name</th>
              <th>Delete</th>            
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>

      </form>

I just want to add a new row to a table when a add button clicked, but it seems a click of the add button triggers a submission of form.

Isn't is only a button with

 type=submit

to submit form. Or any button in a form triggers a submission of form ?

I'm not familiar with bootstrap but what happens if you make the `add_user_group()` function `return false;` after adding the row? — Anthony Clark, Feb 22 '13 at 19:32
@AnthonyClark waw. it works (not triggers a form submission)! — icn, Feb 22 '13 at 19:34

Maurice Schleußinger · Answer 1 · 2018-04-04T09:31:01.883

52

No need to use Javascript. Just set type="button" to overwrite the implicit type="submit". This can also be found in the HTML5 specs as mentioned here: https://stackoverflow.com/a/9643866/2175370

edited Apr 04 '18 at 09:31

answered Sep 24 '14 at 12:42

Maurice Schleußinger

1,188
1
11
23

2

This should be the real solution. The other answer does not avoid the form submit by pressing enter in a form field. – Michael Walter Sep 16 '15 at 20:36
This solution only gives you a input to style, and gives you limited styling options. – Ian Jowett Mar 22 '17 at 11:58

score 17 · Accepted Answer · edited Feb 22 '13 at 19:43

17

Having false returned in the function called onclick will prevent form submission. :)

onclick="javascript:add_user_group(2);return false;"

edited Feb 22 '13 at 19:43

icn

17,126
39
105
141

answered Feb 22 '13 at 19:37

Anthony Clark

563
5
17

3

Use Button Tag's Type to button Like – RAHINUR RAHMAN Jan 02 '18 at 09:08

bootstrap html click button without submit form

2 Answers2