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?

Crampton

Answer 1

You could do

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

Retina

Answer 2

Do this:

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

Withdrawal

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 [...] – Ribbonfish

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.

Field