Add regular button inside form that does not perform a submit

Question

I have this form declaration:

<form method="post" action="/web_services/buscar_vuelos?method=get">
  <div id="addSegment_wrapper">
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="addTr" style="display: inline;">
      <span class="ui-button-text">Add Segment</span>
    </button>
  </div>
  <input id="web_services_submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-          text-only" type="submit" value="Search" name="commit">
</form>

And, although I didn't specify "addSegment_wrapper" button as a submit one, every time I click on it, it calls the form action. I just want to treat this button as a regular one.

What should I do?

score 99 · Accepted Answer · edited Nov 25 '19 at 16:19

99

You could do

<button type="button">Add Segment</button>

edited Nov 25 '19 at 16:19

TylerH

20,799
66
75
101

answered Jul 07 '11 at 21:15

switz

24,384
25
76
101

score 48 · Answer 2 · edited Nov 25 '19 at 16:18

48

Do this:

<button type="button" class="(rest of your classes)">Rest of your code</button>

edited Nov 25 '19 at 16:18

TylerH

20,799
66
75
101

answered Jul 07 '11 at 21:14

Cfreak

19,191
6
49
60

9

For reference...Via MDN: type=submit: The button submits the form data to the server. *This is the default if the attribute is not specified*, or if the attribute is dynamically changed to an empty or invalid value. type=button: The button has no default behavior [...] – sbuck Dec 09 '13 at 13:12

score -1 · Answer 3 · edited May 23 '17 at 10:31

Closer to Occams razor (for complex schemes*) could be to construct the 'form to be submitted' separately, ie, to not (ie, drop the use of) the "form" tag: for a description of the latter, please see "how to ajax post a form that includes fields in a dynamic table for which both rows and columns can be added dynamically"

* eg, when your form consists of multiple interaction-events, where a subset is used for form-submission.

Add regular button inside form that does not perform a submit

3 Answers3

Linked