이글루 냠냠

namelessja.egloos.com

포토로그



[Javascript] HTML Form을 루프돌면서 처리하기 Javascript

HTML은 Form 테그와 input, select, textarea 등의 테그를 사용하여 하나의 양식을 만들 수 있다.

Javascript에서는 이들 dom을 직접 접근하여 제어할 수도 있지만,
form에서 제공하는 프로퍼티를 사용하여 양식을 제어할 수도 있다.
form은 length와 elements 프로퍼티를 제공하여, 현재 form의 항목 수와, 각 항목에 대한 dom을 배열로 제공해준다.

언제나 그렇듯 이쯤에서 예제를 하나 만들어볼까 한다.
먼저, 간단하게 사용할 양식은 다음과 같다.
<form id="myForm">
<input type="text" name="account" value="person001"/>
<input type="text" name="name" value="Hans"/>
<form>

그리고, 지정된 양식의 모든 데이터를 출력하는 printForm 함수는 다음과 같다.
물론이지만, 위에 사용된 양식을 그대로 사용할 것이다.
var printForm = function(form) {
if ( undefined === form )
return;

var len = form.length;
if ( 0 === len ) {
console.log('No elements');
return;
}

var fe = form.elements;
for ( var i=0; i<len; i++ ) {
console.log(fe[i].name + ' : ' + fe[i].value);
}
}

printForm ( document.getElementById('myForm') );

함수를 실행하면 myForm의 엘리먼트인 account와 name을 각각 획득하고,
획득한 정보를 console.log를 사용하여 출력하게 된다.
account : person001
name : Hans


덧글

댓글 입력 영역