이번 장에서는 자바스크립트 텍스트박스 추가 로직을 알아보겠습니다.
일반적으로 jsp에서 텍스트박스를 쓸때 html 형태로 구성해서 쓰기 마련인데요. 이번에 보여드릴 예제소스는 버튼을 눌렀을 때 자바스크립트를 이용하여 텍스트박스를 추가하는 형태로 만들어 볼 예정입니다.
소스의 내용은 자바스크립트 변수에 html 코드를 저장한 다음에 innerHTML 메소드를 이용하여 해당 구문을 구현해 내면 됩니다. 일단 예제소스 를 보여드리겠습니다.
예제 소스
<script type="text/javascript"> function add_textbox(){ document.getElementById("t_space").innerHTML += "<input type='text' name='tbox' ><br>"; } </script> <body> <form action="action" method="post"> <div id="t_space"> <input type="button" value="추가" onclick="add_textbox()"> <input type="submit" value="전송"><br> </div> </form> </body>
위의 예제는 추가 버튼을 눌렀을 경우 자바스크립트의 add_textbox 펑션이 실행되는데요.
이 펑션에서 t_space라는 아이디를 가진 공간에 innerHTML을 이용하여 텍스트박스를 생성하는 예제입니다.
실행 후 추가를 눌렀을 때 텍스트박스가 추가되는 모습입니다. 여기서 각각의 필드에 값을 입력하고 전송을 눌러 Java단으로 데이터를 보내보겠습니다.
JAVA단에서 데이터 받기
String result[] = request.getParameterValues("tbox"); for(int i=0; i<result.length; i++){ System.out.println(result[i]); }
위에서 추가를 눌렀을 때 해당 텍스트박스의 name이 tbox로 지정되어 계속해서 중첩되었습니다.
이를 그대로 전송하게 되면 중복 현상으로 마지막으로 생성된 tbox의 값만 전달될 것 같지만 모든 tbox의 값이 배열형태로 형성되어 전송이 됩니다. 이 배열을 자바단에서 getParameterValues를 이용해서 데이터를 받을 수가 있습니다.
그리고 이 데이터를 for문을 통해 가공 및 추출하여 테이블에 손쉽게 Insert 시킬 수 있습니다.
답글 남기기