form 전송이 왜 안돼?
todo list를 리펙토링 하면서 input에 keyup 이벤트로 새 글을 추가하는
함수를 실행시키던 것에서 form 을 날려서 실행시키는 것으로 개선해 보았다.
<footer>
<form action="" class="new-form">
<input type="text" class="footer--input">
<button class="footer--button">
<i class="fa fa-solid fa-pen"></i>
</button>
</form>
</footer>당연히 될 것으로 생각하고 enter 키를 빡빡 눌렀는데 전혀 미동이 없고
에러 메세지 조차 띄우질 않았다. 처음엔 서버가 잘못된줄 알고 (ㅎ)
서버까지 껐다 켰다 했는데 깜깜 무소식이어라..
무언가 잘못 됐다는걸 감지했지만 도대체 무엇이 잘못된지 감을 못 잡았다.
'form 이벤트 발생', 'form submit 이벤트' , 'form 이벤트 안됨' 등등..
form 요소만 문제라 생각하고 주구장창 구글링 하다가 혹시 form 요소 내에 버튼의 타입을
지정하지 않아서인가 하여 'submit' 으로 버튼 타입을 지정했지만 역시나 요지부동 이었다.
조금 더 범위를 확대해 'form 과 button' 으로 구글링을 해보았는데
button 태그가 하는 일에 대해 정리해둔 글을 발견했다.
ㅡ tisory '기분따라 코딩'
문제 발견 !
먼저 첫번째로 내가 간과했던 것은 button 의 디폴트 타입이 'submit' 이라는 것이었다.
그리고 form 요소 내에 button 이 위치했을 때 타입 명시가 없다면
기본적으로 submit 처리가 일어나게 된다.
그런데 처음 form이 작동되지 않았을 때 부터 내가 작성한 form 내부에 있는 button 에는
타입이 없었고 혹시나 하여 type을 "submit"이라고 명시를 해주었는데도 form은 작동되지 않았다.
여기서 두번째 간과했던 것이 바로 button의 타입인 "button" 은
그 자체로 아무런 이벤트가 발생되지 않지만 click 이벤트와 연결시켜
자바스크립트를 활성화 할 수 있다는 점이다.
button 의 타입이 submit 이었는데도 form이 작동하지 않았던 이유는,
button 에 click 이벤트를 걸어두었었는데 click 이벤트는 button의 타입이 "button" 일 때만 발생하기 때문이다.
click 했을 때 이벤트를 발생시켜야 하는데, 타입은 submit으로 되어있으니
당연히 작동 자체가 안될 수 밖에 없었던 것이다.
<footer>
<form action="" class="new-form">
<input type="text" class="footer--input">
<button class="footer--button" type="button">
<i class="fa fa-solid fa-pen"></i>
</button>
</form>
</footer>버튼 타입을 "button"으로 변경하니 정상적으로 form 작동이 잘 되는 것을 확인했다.
이 이슈로 한 시간을 붙잡고 있었는데 늘 느끼는 것이지만
정답을 알면 허탈하기도 하면서 이래서 기본기가 중요한것임을 다시 한 번 새기게 되었다.
정리 하자면,
-
button 의 디폴트 타입은 "submit" 이며,
form 내부에 버튼이 있으면 자동으로 "submit"이 설정된다. -
click 이벤트를 발생할 땐 button의 타입이 "button" 이어야 한다.
-
form 내부의 button 타입이 "button"이 아닌 다른 타입이라면
클릭 이벤트 문법에서 문제가 생기므로 form 자체가 작동되지 않는다.
