[error] 폼 등록 실패 - JS(javascript)와 Ajax Form 전송

기본적으로 폼을 사용해서 데이터를 입력하는 것을 구현하고자 했습니다.

그런데 Javascript에서 계속 문제가 생기는 거 같았습니다.

 

처음에 작성한 코드

 

let form = document.querySelector("form[name=contactForm]");

let goUrlXdmInst = "/contact";

document.getElementById("btnSubmit").onclick = function () {
    form.action = goUrlXdmInst;
    form.submit();
}

 

 

Spring에는 오류 코드가 뜨지 않으며, 화이트라벨 오류가 난다.

 

오류: Content-Type 'application/x-www-form-urlencoded;charset=UTF-8' is not supported.

 

뭐가 문제일까 싶었는데, JS에 문제가 있는 거 같아서 JavaScript를 수정하였다.

 

---

 

수정한 JS 코드

 

document.getElementById("btnSubmit").onclick = function (event) {
    event.preventDefault(); // 기본 폼 제출 동작 방지

    // form 요소 선택 확인
    let form = document.querySelector("form[name=contactForm]");

    // form이 null인 경우를 체크
    if (!form) {
        console.error("Form element not found!");
        alert("폼을 찾을 수 없습니다.");
        return;
    }

    // FormData를 JSON으로 변환
    let formData = new FormData(form);

    // FormData를 JSON으로 변환
    let jsonData = {};
    formData.forEach(function(value, key) {
        jsonData[key] = value;
    });

    console.log(jsonData);  // 데이터를 콘솔에서 확인해 보세요.

    fetch("/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" }, // JSON 형식으로 보내기
        body: JSON.stringify(jsonData), // JSON으로 변환된 데이터 전송
    }).then(response => {
        if (response.ok) {
            alert("등록 성공!");
        } else {
            alert("등록 실패!");
        }
    }).catch(error => {
        console.error("Error:", error);
        alert("오류 발생!");
    });
};

 

이렇게 했는데 HTML 자체에서 alert로 등록 실패가 되었습니다.

 

 

 

컨트롤러에서 contact 로그를 찍어보았다.

 

 

이렇게 joinCategory랑 joinMessage가 null값으로 들어오고 있다.delYn과 createDate는 백엔드에서 디폴트값을 처리하고 있어서 상관이 없는데,프론트에서 입력이 잘 된 값이 왜 안 될까... 고민을 해봤다.

 

정답은 폼에 있는 name값의 문제였다.

 

<form id="contactForm" name = "contactForm" method="post">
    <!-- 구인 형태 -->
    <div class="form-floating mb-3">
        <select class="form-select" id="join_category" name="joinCategory" required>
            <option value="일반" selected>일반</option>
            <option value="랭크">랭크</option>
            <option value="코발트">코발트</option>
        </select>
        <label for="join_category">구인 형태(일반/랭크)</label>
    </div>

    <!-- 메시지 -->
    <div class="form-floating mb-3">
        <textarea class="form-control" id="join_message" name="joinMessage" placeholder="Enter your message here..." style="height: 10rem" required></textarea>
        <label for="join_message">메시지</label>
    </div>
</form>

 

 

이렇게 form의 name을 설정해준다.그 다음 select, textarea의 name 속성을 entity와 dto의 변수명과 통일시켜야 한다.

 

변수 네이밍 컨벤션을 지키며 코드를 작성하니까 헷갈려서 name 속성을 잘못 입력한 문제였던 거 같다.다음 블로그에 따로 TIL로 변수 네이밍 컨벤션과 Ajax 부분을 따로 공부해보고자 한다.