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

Question

I have tow buttons inside my form,
one is a submit and the second is a simple button (like cancel button that close the 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 the cancel button is in a 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 the onLoad function I set the cancel button action.
*I have another dialog in my page that do the same things and include cancel and save buttons too, and it's working fine.
When I click on the cancel button the "addSubject" is called;
What is wrong in my code? Why does the action is called if I click on cancel button too?