form 제출을 자바스크립트에서 처리하기

<form>
  <div class="config-form">
    <label for="username">Player Name</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <button type="submit" class="btn">Confirm</button>
    <button type="button" class="btn btn-alt" id="cancel-btn">Cancel</button>
  </div>
</form>

이러한 form이 존재할 때 form에 입력된 정보를 자바스크립트로 핸들링 하려면 어떻게 해야 할까?

const formElement = document.querySelector('form');
formElement.addEventListener('submit', savePlayerInput);

먼저 자바스크립트에서 form에 접근한 후에(이 html문서에서 form은 하나밖에 없음) eventlistener를 추가한다. 이때 event의 type으로는 ‘submit’을 준다. 또한 두 번째 인수로 savePlayerInput라는 함수를 주어서 유저가 데이터를 제출했을 때 함수가 실행되도록 한다.

function savePlayerInput(event){
    event.preventDefault();
    const formData = new FormData(event.target);
    const playerName = formData.get('username');

}

이 함수가 핵심. 함수의 파라미터로 event(이름은 상관없음)를 넣어서 이벤트가 실행될 때의 정보를 담고 있는 이벤트 객체를 불러온다.

그 후 preventDefualt()메서드를 사용하여 브라우저가 form이 제출되었을 때 디폴트 동작을 하지 못하도록 한다. 만약 디폴트 동작을 막지 않는다면 form이 제출될 때마다 페이지가 새로고침 되어 버리므로 입력된 데이터가 날아가버린다.

const formData = new FormData(event.target);

다음으로 formData라는 객체를 new 연산자를 사용하여 생성한다. 이 때 브라우저의 자바스크립트에 내장된 함수인 FormData를 사용한다.

FormData라는 함수는 특정 모양의 객체를 생성하는 함수이며, 이것 앞에 new키워드를 추가하면 미리 저장된 객체의 청사진을 사용할 수 있게 된다.

파라미터로는 event.target을 주었는데,

formElement.addEventListener('submit', savePlayerInput);

에서 이벤트 동작이 ‘submit’이므로 event.target은 제출한 데이터를 가리키는 포인터가 된다.

이렇게 FormData 함수에 HTML의 form태그에 대한 포인터를 주면 이 함수는 입력된 값을 자동으로 추출하여 저장한다.

const playerName = formData.get('username');

formData청사진에서 저장된 입력 데이터를 뽑아오려면 get메서드를 사용하고, 이것의 파라미터로는 데이터를 가져오려는 form의 name 속성값을 입력해준다. 여기서는 form의 name이 username이었으므로 ‘username’을 파라미터로 주었다.

이제 playerName이라는 상수에는 사용자가 입력한 데이터가 문자열로 들어가게 된다.

---

+new 연산자는 사용자 지정 객체 혹은 내장 객체의 인스턴스를 생성하는 연산자라는데 쓸 일이 많아보이므로 더 알아봐야 겠다.