[html] form submit action 주의

form submit action 주의

snake game 만드는 중이였는데, 게임 실행하고 잠시 후 갑자기 계속 새로고침이 되서 꽤나 곤란한 삽질을 수행했다..

열심히 javascript 코드에서 삽질하고 있었는데, 설마하며 잠깐 살펴본 html에서 원인을 발견했다.

다음 코드가 문제였다.

<form name="Form" method="POST" action="process.php">
    <button class='buttons' id='startBtn'>START</button>
    <button class='buttons' id='restartBtn'>RESTART</button>
    <button class='buttons' id='submitBtn' type="submit" onclick="submitScore()">SUBMIT</button>
</form>

세가지의 버튼이 존재하는데, start와 restart 버튼은 js에서 click 이벤트가 발생할 시, 특정 함수를 실행하는 쪽으로 구현했고, submit 버튼의 동작은 onclick Attribute를 이용해서 submitScore()와 인자들을 전달하여 process.php가 실행되도록 했다.

근데 여기서 문제가 발생한 것이, 나는 process.php가 실행되도록 하는것이 type을 submit으로 설정한 버튼에서만 되는 것인줄 알았는데, 위처럼 type을 명확하게 설정해주지 않은 두 버튼이 눌렸을 때도 저 process.php가 실행되는 것이었다.

process.php에 리다이렉트 해놓은 코드가 계속 실행되면서 새로고침되는 것처럼 보였던 것이다... ㅜ

아무튼 다음과 같이 type을 명확하게 설정해주면 해결할 수 있는 문제였다.

<form name="Form" method="POST" action="process.php">
    <button class='buttons' id='startBtn' type='button'>START</button>
    <button class='buttons' id='restartBtn' type='button'>RESTART</button>
    <button class='buttons' id='submitBtn' type="submit" onclick="submitScore()">SUBMIT</button>
</form>