[jsp] 동적 생성된 input 값 form 으로 한꺼번에 컨트롤러로 전달 (name 배열)

내가 하고 싶었던 것

컬럼명1	컬럼명2	컬럼명3	컬럼명4	컬럼명5
입력하는곳1	입력하는곳2	입력하는곳3	입력하는곳4	입력하는곳5

이렇게 생긴 테이블이 있고
"추가" 버튼을 누르면 값을 입력할 수 있는 row가 계속해서 생성된다.

컬럼명1	컬럼명2	컬럼명3	컬럼명4	컬럼명5
입력하는곳1	입력하는곳2	입력하는곳3	입력하는곳4	입력하는곳5

이런 식으로..

아무튼 이렇게 동적 생성하는 것까지는 좋은데
동적으로 추가된 인풋 여러개를 한꺼번에 어떻게 넘겨야 할지를 몰랐다.

input name="name1" 이런 식으로 넘겨서 컨트롤러에서 받아야 할 것 같은데
여러개가 생성되면 name1 name2 name3 ... 이렇게 계속 생성시켜야 하나?

뭔가 너무 어렵고 예쁘지가 않아서 이럴 리가 없는데 싶은 마음으로 일단 구현해보았다.
다른 방법이 있을 것 같은데... 싶으면서 일단 해봄 (??)

 

방법 1. 노가다 (따라하지 마시오)

<input type="text" name="svcId1">
<input type="text" name="svcName1">
<input type="text" name="remarks1">
//생략했지만 이 input 들은 각각 table > tbody > tr > td 안에 하나씩 들어있음

<script>
	var nameArray = new Array ( "svcId", "svcName", "remarks" );
    //일일이 이름을 넣어주기 위해 만든 어레이
    
    var tbIndex;
    // 몇번째 row인지 넣기 위해 만든 인덱스
    
    $(document).ready(function(){
    	tb_index = 1; // 시작하자마자는 row가 하나뿐이니...
    });
    
    $("rowAddBtn").click(function(){
    	tb_index++; //row 추가하는 버튼 누를때마다 인덱스도 늘림    
        
        $("#tableId > tbody:last").append("추가되는 table tr 코드");
        //버튼 누를 때마다 row 추가
        
        $('#tableId tr:last > td').each(function(index){ //하나의 tr 안에 있는 td 개수만큼 반복
        	$(this).children('input').attr('name', nameArray[index] + '' + tbIndex);
            //td 자식들 중 input을 찾아서 name을 넣어줌.
            //name어레이에서 이름 가져오고 tbIndex로 몇번째인지 가져옴
        });
    });
</script>

진짜 이렇게 짰다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
모르는 걸 어떡해
일단 헤딩하기....

일단 이렇게 해도 내가 의도한 대로 되긴 된다. name1 2 3 4 쭉 생성되므로 싸그리 form을 통해 컨트롤러로 넘겨버리면
컨트롤러에서도 반복문 같은 걸로 받을 예정이었다.

근데 컨트롤러단 구현하기 전에 아무리 생각해도 다른 방법이 있을 거 같아서 마크님한테 물어봤다.

결론 : 멍청하면 손발이 고생
그래도 컨트롤러 구현하기 전에 알아서 그나마 쪼금 다행

 

방법 2. 여러 Input에 동일한 name 사용

그냥..... 그냥 저렇게 힘들게 name을 구분할 필요가 없는 거였다.
그냥 같은 name 쓰면 된다...

<input type="text" name="svcId">
<input type="text" name="svcName">
<input type="text" name="remarks">

html이 이렇게 구현되어 있다면

스크립트에서 동적으로 추가할 때도

  $("rowAddBtn").click(function(){        
        $("#tableId > tbody:last").append("추가되는 table tr 코드이며 input name은 기존 name과 동일");
        //버튼 누를 때마다 row 추가
  });

그냥 이러면 됨
그냥 row가 추가되든 말든 같은 이름으로 만들면 알아서 String[] 타입으로 값이 저장된다.
그럼 컨트롤러에서는

String[] svcIdArray = request.getParameterValues("svcId");

getParameterValues 를 사용하여 받아오는 것이 가능하다.
출력할 때는 svcIdArray[2] 이런 식으로 사용 가능.

 

 

역시 공부는 필요할 때 하는 게 가장 효과적이다.
ㅋ

p.s. 마크님 감사합니다.