- html -> html 값 전송시 form method="post" 는 사용 불가 (post : 백엔드로 전달할 시에만 핸들링 가능)
❗ only get 사용
- get 방식 : url 뒤에 ?파라미터값 붙음
⚡ 타이틀
* step1.html
<body> <form method="get" id="frm" action="./step2.html"> 고객명 : <input type="text" name="user"><br> <input type="checkbox" name="sms" value="Y">SMS 수신동의(선택)<br> <input type="checkbox" name="event" value="Y">이벤트 수신동의<br> <input type="checkbox" name="kakao" value="Y">카카오톡 푸시알림<br> <input type="button" value="전송" onclick="gopage()"> </form> </body> <script type="text/javascript"> function gopage(){ frm.submit(); } </script>
🔽
* step2.html
- decodeURIComponent(값) : 파라미터에 한글을 가져올시 깨지므로 decode로 출력
( decodeURIComponent : js / decodeURI : es )
- getElementsByName : name은 기본이 원시배열 형태를 구성함 ex) abc[0].value<body> <form id="frm"> <input type="hidden" name="sms" value="N"> <input type="hidden" name="event" value="N"> <input type="hidden" name="kakao" value="N"> 고객명 : <input type="text" name="person" readonly><br> SMS 수신 여부 : <span id="sms">N</span> <br> 이벤트 수신 여부 : <span id="event">N</span> <br> 카카토톡 수신 여부 : <span id="kakao">N</span> </form> </body> <script type="text/javascript"> //javascript에서 url 값 중 URI(파라미터)값만 확인하는 함수 var data = window.location.search; //한글 인식이 어렵다 //배열로 출력 : 값을 몇개 체크하느냐에 따라 배열의 갯수 달라짐(& 기호는 사라짐) var data_sp = data.split("&"); var nm = data_sp[0].split("="); //readonly input에 값 넣음(한글이면 깨지기 때문에 decode해서 넣어줌) frm.person.value = decodeURIComponent(nm[1]); if(data_sp.length > 1){ //체크박스 하나라도 체크 var f; //첫밴째배열[0]은 체크박스가 아니므로 이미 처리 완료 -> 그 외의 배열 검토 for(f=1; f<data_sp.length; f++){ var arr = data_sp[f].split("="); //step1의 name과 step2의 id값을 동일하게 맞춤 //data_sp의 ["email","Y"] 중 1번째 값과 일치하는 id값에 innerHTML document.getElementById(arr[0]).innerHTML = arr[1]; document.getElementsByName(arr[0])[0].value = arr[1]; } } </script>
'CLASS > SERVLET' 카테고리의 다른 글
| #4-2 / 동의 체크박스 Map 배열로 받기 (0) | 2024.05.31 |
|---|---|
| #4-1 / html에서 java class로 값 전달,로그인 예제 (0) | 2024.05.31 |
| #3-2 / 암호화(security) (0) | 2024.05.30 |
| #3-1 / form 예제 (0) | 2024.05.30 |
| #2-4 / double form (0) | 2024.05.29 |