html5 문법 (5) form값 얻기
(5) form값 얻기
폼(form)을 사용할 때 가장 중요한 부분은 사용자가 선택하거나 입력한 값을 취득하여, 데이터베이스에 저장(서버로 전송)하는 것이다. 사용자가 입력한 값을 취득하는 부분은 게임이나 반응형 어플리케이션을 제작할 때도 상당히 중요하다.
폼을 자유자재로 활용할 수 있다면, 기본 어플리케이션은 제작할 수 있다. 폼값을 받고 주는 방식은 반응형 프로그램 제작의 필수과정이다.
1 체크 상자의 값 얻기
[예시]
<form>
<div>
최근 본 영화는?</br>
<label><input type="checkbox" name="movie" value="스파이브릿지">스파이브릿지</label>
<label><input type="checkbox" name="movie" value="베네팅게이지">베니팅게이지</label>
<label><input type="checkbox" name="movie" value="라레자브롤">라레자브롤</label>
<input type="button" id="btn"
value="제출">
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded',function(
){
document.getElementById('btn').addEventListener('click',function( ){
var movieList = document.getElementsByName('movie');
var result = [ ];
for(var i=0; i<movieList.length; i++){
var movie_ = movieList.item(i);
if(movie_.checked){
result.push(movie_.value);
}
}
window.alert(result);
});
})
</script>
위의 코드의 핵심은 result 배열을 만들어서, name이 'movie'인 노드들 중에서 체크된 경우 push하는 부분이다. ` .checked 매서드 `는 폼에서 체크여부를 알 수 있는 유용한 매서드이다.
2 라디오 버튼값 얻기
라디오 버튼값은 한번의 선택으로, 복수선택은
불가능하다. 위의 코드와 비슷하지만, 재활용할 수 있는 함수 radioSLC를 만들어서
체크를 해보자.
[예제]
<form>
<div>
최근 본 영화는?</br>
<label><input type="radio" name="movie" value="스파이브릿지">스파이브릿지</label>
<label><input type="radio" name="movie" value="베네팅게이지">베니팅게이지</label>
<label><input type="radio" name="movie" value="라레자브롤">라레자브롤</label>
<input type="button" id="btn"
value="제출">
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded',function( ){
var btn = document.getElementById('btn');
var radioSLC = function(val){
var result = '';
var elem =
document.getElementsByName(val)
for(var i=0; i<elem.length; i++){
var data = elem.item(i);
if(data.checked){
result = data.value;
break;
}
}
return result;
};
btn.addEventListener('click',function( ){
window.alert(radioSLC('movie'));
});
});
</script>
3 복수선택 & 선택알림
아래 예제는 복수선택이 가능하고, 초기값으로 '히스레저'와 '키아누리브스'를 미리 체크한 코드이다.
[예제]
<form>
<div>
좋아하는 배우는?</br>
<label><input type="checkbox" name="actor" value="히스레저">히스레저</label>
<label><input type="checkbox" name="actor" value="키아누리브스">키아누리브스</label>
<label><input type="checkbox" name="actor" value="톰헹크스">톰헹크스</label>
<input type="button" id="btn" value="제출">
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded',function( ){
function setValue(name,value){
var elems = document.getElementsByName(name);
var result =[ ];
for(var i=0; i<elems.length; i++){
var elem = elems.item(i);
if(value.indexOf(elem.value) > -1){
elem.checked = true;
}
if(elem.checked){
result.push(elem.value);
}
}
return result;
}
setValue('actor',['히스레저','키아누리브스']);
document.getElementById('btn').addEventListener('click',function( ){
alert(setValue('actor',[ ]));
})
});
</script>
위의 코드에서 주의할 점은, setValue 함수를 선언하여, default값을 미리 체크하는 부분이다. 버튼 이벤트 함수 내에 초기값을 설정한 setValue함수를 넣으면, 초기값이 나오지 않는다.
그 이유는, 버튼 이벤트가 발생해야만 초기값이 설정이 되는데, 버튼을 선택하는
순간 체크한 값을 위주로 alert에 전달되기 때문이다. 따라서 아무것도 안하면, 그냥 초기값이 선택되는 오류아닌 오류가
발생한다. 오류를 방지하려면, setValue함수를 미리 호출하고, 버튼을 클릭했을 때는 초기값을 빈 배열 상태로 넣기만 하는 코드를 작성해줘야
한다.