Add regular button inside form that does not perfo

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, everytime I click on it, it calls the form action. I just want to treat this button as a regular one.

What should I do?

Thx

Answer 1

Do this:

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

Answer 2

You could do

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

Answer 3

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.