이런 형식으로 사람을 찾아서 넣어 입력해서 input 제출하는 form 작성중임
어느정도 데이터가 많고, 기존 데이터에서 골라야 하기에 select 보다 그냥 창띄워서 가져오는게 더 좋다고 생각하여 이렇게 만들었음.
<div>
<label for="engineerId">엔지니어:</label>
<input type="text" id="engineerName" name="engineerName" required readonly>
<input type="hidden" id="engineerId" name="engineerId" required>
<button type="button" onclick="openEngineerPopup()">엔지니어 찾기</button>
</div>
값으로는 표기할 enginerName, 실제로 전달할 engineerId 를 hidden 값으로 가져와야 함
script 내용
function openEngineerPopup() {
const width = 1200;
const height = 800;
const left = (screen.width / 2) - (width / 2);
const top = (screen.height / 2) - (height / 2);
// 팝업 창 열기
const popup = window.open(
'engineer_search',
'엔지니어 검색',
`width=${width},height=${height},top=${top},left=${left}`
);
// 팝업 창이 닫혔을 때 처리 (옵션)
popup.onbeforeunload = function () {
const engineerId = popup.document.getElementById('selectedEngineerId');
const engineerName = popup.document.getElementById('selectedEngineerName');
if (engineerId) {
// 부모 창의 입력 필드에 고객사 이름 설정
document.getElementById('engineerId').value = engineerId.value;
document.getElementById('engineerName').value = engineerName.value;
}
};
}
popup 변수에 window.open 함수를 추가
window.open("url주소", "팝업창에 표시될 title내용", "팝업창 크기및위치")
그럼 engineer_search 항목에서는?
->> Controller 에서 이제 데이터담아서 해당 url인 engineer_search 페이지에 뿌려두는건 알아서 하고
engineer_search 페이지
이런식으로 표시
<ul id="engineerList">
<c:forEach items="${engineerList}" var="engineer">
<li style="cursor: pointer;" onclick="selectEngineer('${engineer.userName}', '${engineer.userId}')">${engineer.userName}</li>
</c:forEach>
</ul>
<input type="hidden" id="selectedEngineerId" value="" />
<input type="hidden" id="selectedEngineerName" value="" />
<script>
function selectEngineer(engineerName, engineerId) {
// 선택한 엔지니어 이름을 hidden input에 저장
document.getElementById('selectedEngineerId').value = engineerId;
document.getElementById('selectedEngineerName').value = engineerName;
window.close(); // 팝업 창 닫기
}
jstl forEach 를 이용해서(다른 방식으로든) 목록을 뿌려서 클릭을하게되면 selectEngineer 함수가 작동해서 window.close 가 된다.
여기선 클릭하면 window.close 지만 다른방식으로 전달해도됨.
아무튼 중요한것은 selectEngineer(클릭시) 함수가 input hidden 에 선택한 name, id 값을 저장한다는 것이고 그 상태에서 window.close 를 한다. 그 이후 원래 페이지를 다시 보자면
// 팝업 창이 닫혔을 때 처리 (옵션)
popup.onbeforeunload = function () {
const engineerId = popup.document.getElementById('selectedEngineerId');
const engineerName = popup.document.getElementById('selectedEngineerName');
if (engineerId) {
document.getElementById('engineerId').value = engineerId.value;
document.getElementById('engineerName').value = engineerName.value;
}
};
popup.onbeforeunload 에서 아까 위에 input hidden 에 담아둔 값을 가져온다.
그 이후 정상적으로 잘 가져왔으면 내가 입력하고자 하는 input 에 (맨위에 보여줬던) 값을 넣게됨
