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 를 명시해주면 연결이 됩니다.
Author And Source
이 문제에 관하여(HTML Form 내부에 다수의 Submit 버튼을 넣을때 Javascript 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seop/HTML-Form-내부에-다수의-Submit-버튼을-넣을때-Javascript-처리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)