HTML Form 내부에 다수의 Submit 버튼을 넣을때 Javascript 처리

저번에 Form 마크업을 유지보수성 있게 Submit, Reset 하는 요령을 학습했었습니다. 이번에는 더 나아가, 만약에 Form 안에 Submit 버튼이 2개 이상 있는 경우는 어떻게 해야하는지, 디자인상의 한계로 Submit 버튼을 Form 외부에 부착할 수 밖에 없을 때에는 어떤 방식으로 코딩해야하는지에 관한 설명을 이어나가보고자 합니다.

Form 내부에 Submit 버튼이 2개 이상 있는 경우

마크업

<form>
  <input type="text" name="name1" />
  <input type="text" name="name2" />
  
  <button type="submit" data-submit-type="search">조회</button>
  <button type="submit" data-submit-type="excel">엑셀 다운로드</button>
</form>

업무를 진행하던 중, '조회' 버튼 뿐만이 아니라 '엑셀 다운로드' 버튼도 submit 버튼으로 만들고 싶었습니다. 왜냐하면 '엑셀 다운로드' 또한 form 의 input 을 파라미터로 전달받는 로직이 있기 때문인데요, 이렇게 할 경우 form 의 submit 핸들러에서 모든 로직이 FormData 를 공유받아 유지보수가 용이해지는 효과가 있습니다.

submit 핸들러에서 submit 종류를 구분하기 위하여, submitType 을 데이터셋에 추가하도록 합니다.

이벤트 리스너 등록

const  formElement = document.querySelector('form selector');

formElement.addEventListener('submit', handleSubmit);

submit 이벤트를 하나만 바인딩 해주면 되므로, 유지보수에 용이하게 됩니다.

이벤트 핸들러

function handleSubmit(e) {
  e.preventDefault();
  
  const formData = new FormData(e.target);
  const submitType = e.submitter.dataset.submitType // submitter: IE 미지원
  
  switch (submitType) {
    case 'search':
      search(formData); break;
    case 'excel':
      downExcel(formData); break;
    default:
      console.error('알 수 없는 submit type');
  }
}

• AJAX 요청을 위해 form 의 기본 이벤트는 제거합니다.
• e.submitter 를 통해 submit 을 발생시킨 버튼 요소를 가져올 수 있습니다. 그 요소의 dataset 을 읽어 submitType 을 알아냅니다.
• submitType 을 판별 후 해당되는 서비스 함수를 formData 와 함께 실행시킵니다.
• 서비스 함수에서 폼 데이터 유효성 체크를 하고 AJAX 요청을 보내는 등의 로직을 수행하면 됩니다.

Submit 버튼이 Form 바깥에 있는 경우

<form id="someForm">
  <input type="text" name="name1" />
  <input type="text" name="name2" />
  
  <button type="submit" data-submit-type="search">조회</button>
</form>
...
...
<button type="submit" form="someForm" data-submit-type="excel">엑셀 다운로드</button>

디자인 상의 한계로 submit 버튼이 form 의 바깥에 있을 수밖에 없는 경우, 그렇지만 해당 버튼이 form 과 관련이 있음이 명백할 때, 위와같이 form 속성에 form 의 id 를 명시해주면 연결이 됩니다.