javascript - javascript 객체를 HTML form의 input에 맵핑하기(Tip code)

들어가기

웹 개발하다보면, 흔하게 해야 하는 Javascript 객체를 HTML의 form 내부의 input에 맵핑하는 함수이다.

javascript공부를 게을리해 Jquery만 사용하다보니, 이런것 하나 짜는데 한 세월이다.

반성하자.

아래 함수는 javascript 객체의 프로퍼티명과 일치하는 name을 갖는 input태그를 form에서 찾아 값을 맵핑하는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//자바스크립트 객체를 html에 맵핑, formId: html form id string, paramObj : javascript 객체
function setFormbyObjcet(formId, paramObj){

var frm_element = document.getElementById(formId);
var inputListObj = frm_element.getElementsByTagName('input');

for(let index in paramObj){
console.log(paramObj[index]);
if (inputListObj.hasOwnProperty(index)) {
inputListObj[index].value = paramObj[index];
}
}//__for

}//__setFormbyObjcet

hansontable grid에 특정 row 선택시 form맵핑에 적용해보았다.

수정1 - input type 별로 맵핑하기

음 조금 이상하다. 위에서 getElementsByTagName('input')에서 input type ='image' 엘리먼트는 가져오지 못한다. 그래서 소스를 아래처럼 수정했다.

form document를 가져올때 document.forms로 가져오게 수정했다.

input type이 text가 아닌 image인경우 값을 src에 맵핑하게 수정했다.

크흠 javascript 책을 다시 봐야겠다. 기억이 한개도 안나네...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//자바스크립트 객체를 html에 맵핑
function setFormbyObjcet(formId, paramObj){

const frm_element = document.forms[formId].getElementsByTagName("input");

for(let index in paramObj){

if (frm_element.hasOwnProperty(index)) {
if(frm_element[index].type === "text"){
frm_element[index].value = paramObj[index];
}else if(frm_element[index].type === "image"){
frm_element[index].src = paramObj[index];
}
}//__if

}//__for

}//__setFormbyObjcet

수정1 코드 적용 결과

끝!