html - What cause to button working like a submit button? -

i have tow buttons inside form, 1 submit , second simple button (like cancel button close dialog).

code:

<dialog id="addsubjectdialog" style="width:20%; height:25%;">          <div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_subject_dialog_title" /></h2></div>             <form action="addsubject" method="post" >             <div style="width:100%; hegit:20%;">             <h2 style="font-size:100%;"><input id="subjectname" name="subjectname" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_subject_name" /> </h2>          </div>            <div style="height: 60px;margin-top:5% ;">               <fmt:message key="save" var="save"/>              <input type="submit"  class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>              <button id="cancelsubsubjectdialog"   class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>          </form>          </div>           </dialog> 

the code of cancel button in script:

 <script type="text/javascript">      window.onload = function () {      document.getelementbyid("cancelsubjectdialog").addeventlistener('click', function(e) {             e.preventdefault();              document.getelementbyid("addsubjectdialog").close();           });     document.getelementbyid("savesubjectdialog").addeventlistener('click', function(e) {         e.preventdefault();            document.getelementbyid("addsubjectdialog").close();       });         }      function showdialog(dialogname) {         selectlist();         document.getelementbyid(dialogname).showmodal();     }     </script> 

in onload function set cancel button action.

*i have dialog in page same things , include cancel , save buttons too, , it's working fine.

when click on cancel button "addsubject" called; wrong in code? why action called if click on cancel button too?