메뉴 건너뛰기


Developer > Web Application

HTML,CSS,JS 동적으로 폼을 생성하자

2013.11.13 10:02

푸우 조회 수:8101



 동적으로 폼을 생성하자 

사용자의 선택에 따라 폼을 동적으로 생성하여 보여줍니다.
주의 할 점은 폼이 보이지 않는다고 해서 Submit시에 그 값이 다음 페이지로 넘어가지 않는다는 것은 아닙니다.
단지 화면에 해당 폼을 보였다 안 보였다가 하는 것입니다.
어떤 경우 TAG ID를 인식 못하는 경우가 있었습니다. 
이럴때는 document.getElementById(아이디)로 하면 되더군요.

 실행화면 보기


 소스코드보기

<script> function bbb() { switch(docu_type.selectedIndex){ case 1: docuAAA.style.position=''; docuAAA.style.visibility='visible'; docuBBB.style.position='absolute'; docuBBB.style.visibility='hidden'; break; case 2: docuAAA.style.position='absolute'; docuAAA.style.visibility='hidden'; docuBBB.style.position=''; docuBBB.style.visibility='visible'; break; default: docuAAA.style.position='absolute'; docuAAA.style.visibility='hidden'; docuBBB.style.position='absolute'; docuBBB.style.visibility='hidden'; break; } } function aaa() { if(target.selectedIndex==1){ docuLayer.style.position=''; docuLayer.style.visibility='visible'; bbb(); }else { docuLayer.style.position='absolute'; docuLayer.style.visibility='hidden'; docuAAA.style.position='absolute'; docuAAA.style.visibility='hidden'; docuBBB.style.position='absolute'; docuBBB.style.visibility='hidden'; } } </script> <table border="1"> <tr><td> <select id=target name="target" onchange="aaa()"> <option> 통합검색 <option> 작성례 <option> 영상정보 </select> <span id=docuLayer style='visibility:hidden;position:absolute;'> <select id=docu_type name="docu_type" onchange="bbb()"> <option> 전체 <option> AAA <option> BBB </select> </span> <input type=text name=query /> <span id=docuAAA style='visibility:hidden;position:absolute;'> <br /> AAA양식 <input type=text name=test /> AAA양식2<input type=text name=test2 /> </span> <span id=docuBBB style='visibility:hidden;position:absolute;'> <br /> BBB양식 <input type=text name=test /> BBB양식2<input type=text name=test2 /> </span> </td></tr> </table>


Creative Commons License
Creative Commons License이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Copyright 조희창(Nicholas Jo). Some rights reserved. http://bbs.nicklib.com