들어가기
웹 개발하다보면, 흔하게 해야 하는 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
수정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
끝!