[JavaScript] 폼 요소에 액세스하기

 

 

폼 요소에 액세스하기

자바스크립트에서 폼(form)은 사용자의 입력을 받는 대표적인 수단이다. 이러한 폼에서 값을 취득하고 설정하는 방법을 알아본다.

 

 

 입력 상자/선택 상자의 값 취득하기

입력 상자/선택 상자의 값을 취득하는 방법은 value 프로퍼티에 액세스하기만 하면 된다. 설정하는 것도 value 프로퍼티의 값을 변경하면 된다.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btn').addEventListener('click', function() {
        var name = document.getElementById('name');
        // 입력 상자 값 취득하기
        console.log(name.value);
        // 입력 상자 갑 설정하기
        // name.value = "Hello";
    }, false);
}, false);

 

 

 체크 상자의 값 취득하기

<div>
    좋아하는 음식은?
    <label><input type="checkbox" name="food" value="라면">라면</label>
    <label><input type="checkbox" name="food" value="치킨">치킨</label>
    <label><input type="checkbox" name="food" value="초코타르트">초코타르트</label>
    <input type="button" value="송신" id="btn">
</div>

 

체크 상자의 값을 취득하는 방법은 다음과 같다.

document.addEventListener('DOMContentLoaded', function() {
    
    document.getElementById('btn').addEventListener('click', function(){
        // 선택값 보관을 위한 배열
        let result = [];
        var foodsNode = document.getElementsByName('food');

        // 체크 박스 검색하여 체크 상태가 있는지 확인
        for(var i=0; i < foodsNode.length; i++) {
            var food = foodsNode.item(i);

            if(food.checked) {
                result.push(food.value);
            }
        }

        window.alert(result.toString());
    }, false);

}, false);

 

 

 라디오 버튼의 값 취득하기

<div>
    좋아하는 음식은?
    <label><input type="radio" name="food" value="라면">라면</label>
    <label><input type="radio" name="food" value="치킨">치킨</label>
    <label><input type="radio" name="food" value="초코타르트">초코타르트</label>
    <input type="button" value="송신" id="btn">
</div>

 

라디오 버튼의 값 취득은 체크 박스에서 값을 취득하는 것과 비슷하다. 

document.addEventListener('DOMContentLoaded', function() {
    
    var getRadioValue = function() {
        // 선택값 보관을 위한 배열
        let result = '';
        var foodsNode = document.getElementsByName('food');

        // 체크 박스 검색하여 체크 상태가 있는지 확인
        for(var i=0; i < foodsNode.length; i++) {
            var food = foodsNode.item(i);

            if(food.checked) {
                result = food.value;
            }
        }
        return result;
    }

    // 버튼 클릭시 getRadioValue 함수 실행
    document.getElementById('btn').addEventListener('click', function(){
        window.alert(getRadioValue());
    }, false);

}, false);

 

 

 라디오 버튼/체크 상자의 값 설정하기

라디오 버튼과 체크 상자의 초기값을 설정하는 것은 for 루프에서 개별 요소에 액세스하여 초기값에 해당하는 요소에 checked 표로퍼티를 true 로 설정하면 된다. 

 

① 라디오 버튼 값 설정하기

<div>
    좋아하는 음식은?
    <label><input type="radio" name="food" value="치킨">치킨</label>
    <label><input type="radio" name="food" value="만두">만두</label>
    <label><input type="radio" name="food" value="음료수">음료수</label>
</div>

 

동일 이름의 라디오 버튼에서는 그중 하나를 체크 상태로 하면 다른 버튼의 체크는 해제된다. 따라서 일치된 요소가 발견된 곳에서 for 루프를 탈출해도 무방하다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setRadioValue = function(name, value) {
        var element = document.getElementsByName(name);

        for(var i=0; i<element.length; i++) {
            var elem = element.item(i);

            if(elem.value === value) {
                elem.checked = true;
                break;
            }
        }
    }
    
    setRadioValue('food', '치킨');
}, false);

 

 

② 체크 상자의 값 설정하기

<div>
    좋아하는 음식은?
    <label><input type="checkbox" name="food" value="치킨">치킨</label>
    <label><input type="checkbox" name="food" value="만두">만두</label>
    <label><input type="checkbox" name="food" value="음료수">음료수</label>
</div>

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setCheckValue = function(name, value) {
        var element = document.getElementsByName(name);

        for(var i=0; i<element.length; i++) {
            var elem = element.item(i);

            if(value.indexOf(elem.value) > -1) {
                elem.checked = true;
            }
        }
    }
    
    setCheckValue('food', ['치킨', '음료수']);
}, false);

 

 

 복수 선택 리스트 상자의 값 취득하기/설정하기

<div>
    <label for="food">좋아하는 음식은?</label>
    <select id="food" multiple>
        <option value="라면">라면</option>
        <option value="만두">만두</option>
        <option value="디저트">디저트</option>
    </select>
    <input type="button" value="송신" id="btn" />
</div>

 

 

① 리스트 선택 상자의 값 취득하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var getSelectValue = function(name) {
        var result = [];
        var opts = document.getElementById(name).options;

        for(var i=0; i<opts.length; i++) {
            var opt = opts.item(i);

            if(opt.selected) {
                result.push(opt.value);
            }
        }
        
        return result;
    }
    
    document.getElementById('btn').addEventListener('click', function() {
        window.alert(getSelectValue('food'));
    }, false);
}, false);

 

 

② 리스트 선택 상자의 값 설정하기

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    var setSelectValue = function(name, value) {
        var opts = document.getElementById(name).options;

        for(var i=0; i<opts.length; i++) {
            var opt = opts.item(i);

            if(value.indexOf(opt.value) > -1) {
                opt.selected = true;
            }
        }
    }
    
    setSelectValue('food', ['라면', '만두'])
}, false);

 

 

 업로드된 파일의 정보 취득하기

<form>
    <label for="file">파일: </label>
    <input type="file" name="file" id="file" multiple />
</form>

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    
    document.getElementById('file').addEventListener('change', function() {
        var inputs = document.getElementById('file').files;

        for(var i=0; i<inputs.length; i++) {
            var input = inputs[i];

            console.log(`파일 명 : ${input.name}`);
            console.log(`종류 : ${input.type}`);
            console.log(`사이즈 : ${input.size / 1024} KB`);
            console.log(`최종갱신일 : ${input.lastModifiedDate}`);
        }
    }, true);
}, false);