문제 : 세 부분으로 나눠서 입력을 받으려고 jsp 를 3개로 구분했더니 이전페이지 다음페이지로 넘어갈 때마다 데이터 유지가 안되는 문제가 발생
해결 : 하나의 jsp 로 구성하되 크게 3개의 div 로 구성해서
첫번째 페이지를 볼 때는 div1 은 style.display = 'inline' , div2와 3은 style.display='none'; 으로 처리해주고 페이지가 변경되면 보이게 되는 div를 변경해주는 방식으로 변경
이렇게 되면 사용자가 입력한 데이터는 유지하면서 입력폼을 세 부분으로 나눠서 볼 수 있어서 편해진다.
사실 페이지라고 하기에도 애매하지만 마치 페이지가 이동하는 것처럼 보인다.
어쨋든 이런 원리로 기존 코드를 크게 세 div 로 구분해서 처리해줬더니 데이터유지문제가 해결되었다!
이렇게 했더니 카카오맵 api 지도가 모서리만 보이고 짤려서 왜그런가 했더니 style 이 변경되었는데 그것을 인식하지 못해서 발생하는 문제였다.
https://apis.map.kakao.com/web/sample/mapRelayout/
스크립트 영역에서 카카오맵이 속해있는 div 의 style 이 변경될 때마다 문제가 발생하는거라
스타일변경이 이루어질때마다 map.relayout(); 함수 호출해서 새로 변경된 div 크기에 맞춰줘야 지도가 잘리는 현상이 발생하지 않는다.
-- HTML
<body>
<div id="page1">
하나 <input type="text" id="one"><br> 둘 <input type="text" id="two"><br> 셋 <input type="text" id="three"><br> 넷 <input type="text" id="four"><br>
</div>
<div id="page2" style="display: none;">
다섯 <input type="text" id="five"><br> 여섯 <input type="text" id="six"><br> 일곱 <input type="text" id="seven"><br>
</div>
<div id="page3" style="display: none;">
여덟 <input type="text" id="eight"><br> 아홉<input type="text" id="nine"><br> 열 <input type="text" id="ten"><br>
</div>
<button type="button" id="preBtn" onclick="changePrevious()" style="display: none;">이전페이지</button>
<button type="button" id="nextBtn" onclick="changeNext()">다음페이지</button>
</body>-- JAVASCRIPT
<script type="text/javascript">
var check = 1; //현재 페이지의 상태를 표시하기 위해 선언한 변수
function changeNext()
{
/* 만약 1페이지면 1을 숨기고 2을 보여준다. check+1 을 한다.
만약 2페이지면 2를 숨기고 3을 보여준다. check+1 을 한다.
만약 3페이지면 다음페이지는 없다. */
if (check == 1)
{
document.getElementById('preBtn').style.display = "inline";
document.getElementById('page1').style.display = 'none';
document.getElementById('page2').style.display = 'inline';
check = check + 1;
} else if (check == 2)
{
document.getElementById('nextBtn').style.display = 'none';
document.getElementById('page2').style.display = 'none';
document.getElementById('page3').style.display = 'inline';
check = check + 1;
}
}
function changePrevious()
{
/* 만약 1페이지라면 이전페이지는 없다.
만약 2페이지라면 2를 숨기고 1을 보여주고 check-1 한다.
만약 3페이지라면 3을 숨기고 2를 보여주고 check-1 한다. */
if (check == 2)
{
document.getElementById('preBtn').style.display = "none";
document.getElementById('page2').style.display = 'none';
document.getElementById('page1').style.display = 'inline';
check = check - 1;
} else if (check == 3)
{
document.getElementById('nextBtn').style.display = 'inline';
document.getElementById('page3').style.display = 'none';
document.getElementById('page2').style.display = 'inline';
check = check - 1;
}
}
</script>'🚩Final Project' 카테고리의 다른 글
| [뮤하비] 비밀번호 변경 기능 구현 (0) | 2021.07.30 |
|---|---|
| [뮤하비] 클래스개설부분 _ 입력값이 많을 때 크게 세 파트로 나눠서 입력받을 때 (0) | 2021.07.30 |
| [뮤하비] 오라클 잡스케쥴러로 클래스 확정짓기 (0) | 2021.07.28 |
| [뮤하비] 오라클 잡스케쥴러로 클래스 확정짓기 (0) | 2021.07.28 |
| [뮤하비] 드디어! 오라클 잡스케쥴러를 통해 매일 정해진 시간에 정산 처리하기 (0) | 2021.07.27 |
