[JavaScript] input 필드에 대응하는 label 찾기

자바스크립트를 많이 사용하는 곳이라면 아마도 폼에서 값은 전송하기 전에 입력된 값이 올바른지 체크하는

곳이 아닐까 싶다. 나 역시도 이 때 사용하기 위해서 자바스크립트 코드를 짜고 있는데.. 작업을 진행하다보니

input 필드와 그에 대응하는 label 을 찾아야 할 일이 생겼다. 폼에서 값을 체크할 때 어떤 input 필드의 값이

올바르지 않다면 그에 대응하는 label 에서 값을 읽어서 경고창을 띠울 때 사용해야하기 때문이다.

<label for=”mb_id”>회원아이디</label>

<input type=”text” name=”mb_id” id=”mb_id” />

간단히 이런 폼의 필드가 이런 식으로 구성되어 있다고 할 때 mb_id 필드에 에러가 있다면 label 태그 안의

“회원아이디” 라는 값을 가져와야 하는 것이다. 그렇게 어려운 것은 아닌데.. 자바스크립트를 잘 몰라서 헤맸다.

function get_label(fld)

{

    var id = fld.getAttribute(“id”);

    var labels = document.getElementsByTagName(“label”);

    var el = null;

    var text = “”;

    for(i=0; i<labels.length; i++) {

        if(id == labels[i].htmlFor) {

            el = labels[i];

            break;

        }

    }

    if(el != null) {

        text = el.innerHTML;

    }

    return text;

}

위 코드처럼 사용하면 문서내 전체 label 태그 중에서 주어진 input 필드에 대응하는 것의 값을 가져올 수 있다.

참고로 label 태그의 for 에 해당하는 값은 htmlFor 를 이용해서 얻을 수가 있다.