HTML Button behaving badly

I added a button that is supposed to open a calendar 'date-picke开发者_C百科r'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.

   <button id="calendar-trigger">...</button>

Edited: derived from: http://www.dynarch.com/projects/calendar/doc/

  <input type="text" id="id_activity_date" name="activity_date"> 
  <input type="button" value="..." id="calendar-trigger">
  <script type="text/javascript">
      new Calendar({
          trigger    : "calendar-trigger",
          inputField : "id_activity_date",
          onSelect   : function() { this.hide() }
     });
  </script>

I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.

I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.

What is likely going on here? and How can I fix it?

---

Try this instead:

<input type="button" id="calendar-trigger" value="Button Label">

I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.

If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.

---

In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).

Alternatively, you could use <input type="button" id="calendar-trigger" />.

---

I would recommend using <input> as opposed to <button>

<input type="button" value="Click Me" id="calendar-trigger" />

Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.