챗봇 웹페이지에서 채팅창을 벗어나는 이유, form 그리고 button

Java - Spring Boot를 이용해서 챗봇 웹 페이지를 만들어보고 있다.

현재 일어난 문제는 'input'에 질문을 작성하고 'submit' 버튼을 누르면, 

 

submit 할 때 한 번 console 창에 출력되도록 설정한 것이 2번 출력되고,

아래처럼 채팅 웹 페이지를 벗어나서 json 데이터를 보여준다는 것이었다. 

 

채팅을 계속하려면 메시지가 계속 쌓여야하는데, 

더군다나 alert를 이용하거나 매의 눈으로 살펴보면 페이지가 넘어가기 전까지 요청과 응답 메시지가 모두 웹에 잘 추가 된다는, 

이해할 수 없는 점이었다.

 

구글링을 어떻게 해야할지 막막해서 이것저것 찾아보다가 'ajax json 화면뜨는 이유' 라고 검색해서 알아냈다.

아래는 문제의 코드이다. 

살펴보면 form 안에 button이 있는 것을 볼 수 있다.

<form action="/counsel" method="post" th:object="${chatRequest}">
    <div id="input-window">
        <input id="question" name="question" placeholder="수술한 무릎의 뒤쪽이 아파" type="text">
        <button id="send-button">전송</button>
    </div>
</form>

그러니까 이게 form과 button 두번 동작해서 문제가 일어난거라고 하는데 - 

(어떤 블로그에서는 button을 form 밖으로 빼라고 했다. 그런데 그러면 웹 디자인이 틀어져버려서 다른 방법을 찾아봤다)

button의 기능을 설정하기만 하면 button이 동작되지 않도록 할 수 있었다.

 

 

 

아래와 같이 button의 type을 button으로만 설정하면 해결된다.

<form action="/counsel" method="post" th:object="${chatRequest}">
    <div id="input-window">
        <input id="question" name="question" placeholder="수술한 무릎의 뒤쪽이 아파" type="text">
        <button id="send-button" type="button">전송</button>
    </div>
</form>

 

HTML에서는 의심도하지 않고 계속해서 자바스크립트만 뜯어보다 시간을 모조리 보내버렸었다. 앞으로 HTML도 잘 의심해봐야지 ...