엑셀 다운로드 버튼 클릭 후 다른 버튼 동작 이상 문제 해결

📌 엑셀 다운로드 버튼 클릭 후 다른 버튼 동작 이상 문제 해결

🧩 문제 상황

• 동일한 <form id="searchFrm">을 사용하는 화면에서
  • 키워드 검색
  • 지역 조회
  • 엑셀 다운로드
    총 3개의 버튼 존재
• 엑셀 다운로드 버튼 클릭 이후
  → 다른 조회 버튼 클릭 시에도 엑셀 다운로드가 실행되는 문제 발생

---

🔍 원인 분석

• 엑셀 다운로드 시 아래 코드로 form.action을 변경

form.action = "/welfare/listWelExcavateExcel.do";
form.submit();

• 문제는:
  • 한 번 변경된 form.action이 유지됨
  • 이후 다른 버튼 클릭 시에도 동일한 action으로 submit됨

👉 즉, form 상태 오염(side effect) 발생

---

💡 해결 전략

❌ 기존 방식 (문제 발생 구조)

• 하나의 form을 모든 버튼이 공유
• 특정 버튼에서 form 속성을 변경 → 전체 동작에 영향

---

✅ 개선 방식 (핵심 아이디어)

엑셀 다운로드만 독립적인 form으로 분리 (동적 생성)

• 기존 form은 유지
• 엑셀 다운로드 시에만:
  • 기존 form 데이터를 복사
  • 별도의 form 생성 후 submit

---

🛠️ 구현 코드

function listWelExcavateExcel(PageNo, searchCondition, keyword) {
    if (!PageNo || PageNo < 1) PageNo = 1;
    if (!searchCondition) searchCondition = "";
    if (!keyword) keyword = "";
    const sido_cd_id = document.querySelector('input[name=sido_cd_id]').value;
    const sidogun_cd_id = document.querySelector('input[name=sidogun_cd_id]').value;

    // 기존 form 데이터 복사
    const formData = new FormData(document.getElementById("searchFrm"));
    formData.set("page", PageNo);
    formData.set("searchKeyword", keyword);
    formData.set("search_condition", searchCondition);
    formData.set("sido_cd_id", sido_cd_id);
    formData.set("sidogun_cd_id", sidogun_cd_id);

    // 임시 form 생성
    const tempForm = document.createElement("form");
    tempForm.action = "/welfare/listWelExcavateExcel.do";
    tempForm.method = "post";
    tempForm.style.display = "none";

    for (const [name, value] of formData.entries()) {
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = name;
        input.value = value;
        tempForm.appendChild(input);
    }

    document.body.appendChild(tempForm);
    tempForm.submit();
    document.body.removeChild(tempForm);
}

 

---

✅ 결과

• 기존 검색/조회 버튼 정상 동작 유지
• 엑셀 다운로드 버튼만 독립적으로 동작
• form 상태 오염 문제 완전 해결