input 사용자 정의 데이터 속성 추가

실무를 하다보면 한 <input> 태그를 이용해서 값을 두개 받아야 할 일이 있다.

필자는 체크박스를 선택하면 필요한 값을 두개 받아와서 컨트롤러에서 체크하는 기능이 필요하여 그때 사용하였다.

아래는 기존 app_key값만 체크하던것을 app2_key값을 추가해서 체크하는것만을 예시로 들었다.

 

<td class="test_ico">

<label><input type="checkbox" name="test_keys" value="$test.app_key}" data-app-key="${test.app2_key}"/><span class="blind"><spring:message code="M0123" text="선택"/></span>

</label>

</td> 

 

 

1. 자바스크립트를 이용해서 아래처럼 하나의 변수에 값을 두개 가져 올 수 있다.

 

const appTestid = $("input[name='test_keys']:checked").data('app-key');

 

 

2. 다른 방법은 자바스크립트에서 input을 하나 더 만들어서 기존 form에 추가하여 가져올 수도 있다.

 

const appTestInput = *document*.createElement("input");

appTestInput.type = "hidden";

appTestInput.name = "test_keys";

appTestInput.value = checkedCheckbox.getAttribute('data-app-key'); 

ListForm(form이름).appendChild(appTestInput);