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

들어가기

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

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

반성하자.

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

//자바스크립트 객체를 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 책을 다시 봐야겠다. 기억이 한개도 안나네…

//자바스크립트 객체를 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

끝!