[에러노트] button onclick시 form의 onsubmit이 실행되는 현상

<form name="writeForm" action="test.php" method="post" onsubmit= "return ValidateForm();">

<p id="logo">Welcome! </p>

<div id="personal">

<p class="comment">Let me introduce yourself</p>

<label class="notice"> Name </label>

<input type="text" name="writer" size="10"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<label class="notice"> Password </label>

<input type="password" name="pwd" size="17"> </br>

</div>

<div id="board">

<p class="comment">Write your story!</p>

<label class="notice"> TITLE </label>

<input type="text" name="title" size="40"> </br></br>

<label class="notice"> CONTEXT  </label></br>

<textarea class="scrollabletextbox" name="context" id="context"> </textarea> </br>

</div>

<input type="submit" class="confirmBtn" value="Submit">

<button class="confirmBtn" value="Cancel" onclick="CancelBtnClick()"> Cancel </button>

</form>

[에러상황!!!!]

=> cancel button을 클릭하면 form이 제출되는 현상이 발생함.

왜그럴까 하고 봤더니, onsubmit의 제일 밑에 기본이 되는 함수가 onClick 이라고 StackOverflow에 쓰여있었음!!

그래서 button 의 onclick이 같이 실행되는 현상이 발생함. 실제로 누르지도 않았는데!!

그래서 해결하기 위해 input으로 바꾸니 잘됨!

아래는 바꾼 코드!

<form name="writeForm" action="test.php" method="post" onsubmit= "return ValidateForm();">

<p id="logo">Welcome! </p>

<div id="personal">

<p class="comment">Let me introduce yourself</p>

<label class="notice"> Name </label>

<input type="text" name="writer" size="10"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<label class="notice"> Password </label>

<input type="password" name="pwd" size="17"> </br>

</div>

<div id="board">

<p class="comment">Write your story!</p>

<label class="notice"> TITLE </label>

<input type="text" name="title" size="40"> </br></br>

<label class="notice"> CONTEXT  </label></br>

<textarea class="scrollabletextbox" name="context" id="context"> </textarea> </br>

</div>

<input type="submit" class="confirmBtn" value="Submit">

<input type="button" class="confirmBtn" value="Cancel" onclick="CancelBtnClick()">

</form>

input type을 button으로 변경해주니 잘되었다!

싱기방기.

button을 선언하는 방법이 input 태그 하나만 있는 것이 아니라 button 태그도 있다는 것이 너무 신기하다.