입력 값 호출하기
앞에서 Input, select 등 값을 입력할 수 있는 Element 에 대해 배웠습니다만 입력된 값을 불러 올 수 없다면 아무 소용이 없을 것 입니다. 그렇게 하기 위해서는 각 입력 항목의 값이 어떤 식으로 이름이 붙여 지는 지 알아야 되겠습니다. 이번 페이지에서는 입력된 값의 이름을 부르는 방법과 text, checkbox, radio button 과 같은 형식의 데이터 다루는 방법에 대해 알아 보도록 하겠습니다. 우선 아래의 form 을 보면 input Tag의 value가 text 입력하는 곳 입니다. 로 되어 있는데 이 값을 어떻게 부르느냐 하는 문제가 되겠습니다. 아래의 굵게 표시된 name 값이 이 바로 그 열쇠가 됩니다.
Form
<body>
<form action="view.asp" method="post" name="sample">
<input type="text" name="text" size="30" value="text 입력하는 곳 입니다." />
</form>
</body>
아래와 같이 지정합니다.
type="text" 형태의 value 값 호출하기
document.sample.text.value
위의 Code는 문서(document)의, sample 이라는 이름을 가진 form의, text라는 이름을 가진 input(text)에 입력된(되는), 값(value) 이라고 풀어서 설명할 수 있겠군요. 이렇게 위와 같이 상위에서 하위로 한 단계씩 내려 가면서 name 속성 값을 점(.)으로 연결 시켜 불러주면 되겠습니다. 다음은 위의 방법으로 입력하는 내용을 alert 경고창에 띄우는 예제를 하나 해 보져... 실행한 다음 입력란에 새로운 내용을 입력하고 '경고창 보기' 단추를 누르면 입력한 내용이 경고창에 나타납니다.
입력
<html>
<head>
<title>입력 값을 경고창으로 띄우기</title>
<script type="text/javascript">
<!--
function show_message(){
txt = document.sample.text.value
alert(txt)
}
// -->
</script>
</head>
<body>
<form action="view.asp" method="post" name="sample">
<input type="text" name="text" size="30" value="text 입력하는 곳 입니다." />
</form>
<input type="button" value="경고창 보기" onclick="show_message()" />
</body>
</html>
length Method
length Method는 JavaScript에서 없어서는 안 될 Method 중에 하나입니다. Length 란 길이라는 뜻 이지만 JavaScript에서는 갯수를 세어주는 역할도 합니다. 즉, 문자열의 길이(String Object에서 다룹니다.)라든지, 문서내의 같은 id를 가진 Tag의 갯수, Link된 image의 갯수 등을 count해주는 역할을 하게 됩니다. 다음은 length Method를 사용하여 Form collection 의 web 이라는 이름(name)을 가진 input Tag이 몇 개 있는지 count하는 예제가 되겠습니다.
length Method를 시용하여 object 갯수 count 하기
<html>
<head>
<title>몇 개인지 카운트하기</title>
<script type="text/javascript">
<!--
function count_option(){
alert(document.sample.web.length + " 개 입니다.")
}
// -->
</script>
</head>
<body>
<form name="sample">
<input type="checkbox" name="web" value="HTML" />HTML
<input type="checkbox" name="web" value="PHP" />PHP
<input type="checkbox" name="web" value="ASP" />ASP
<input type="button" value="몇 개?" onclick="count_option()" />
</form>
</body>
</html>
checked Property를 이용하여 선택된 radio button의 값 출력하기
radio button의 경우에는 1개 밖에 선택할 수 없기 때문에 간단한 방법으로 어떤 항목이 선택되었는지, value 값이 먼지 알아 낼 수 있습니다. 이때 사용하는 것이 바로 checked Property가 되겠습니다.
checked Property를 이용하여 선택된 radio button의 값 출력하기
<html>
<head>
<title>선택된 radio button의 값 출력하기</title>
<script type="text/javascript">
<!--
function chk_val(language){
document.sample.lang.value = language
document.sample.chk.value = language
}
// -->
</script>
</head>
<body>
<form name="sample">
<input type="radio" name="lang" onclick="chk_val(this.value);" value="HTML" />HTML
<input type="radio" name="lang" onclick="chk_val(this.value);" value="PHP" />PHP
<input type="radio" name="lang" onclick="chk_val(this.value);" value="ASP" />ASP
<br />
<input type="text" name="chk" /><br /><br />
</form>
</body>
</html>
몇 개의 checkbox가 check 되었는지 알아보기
checkbox의 경우 여러 개의 항목 중에서 어떤 것을 선택할지, 또 몇 개나 선택할지 알 수 없기 때문에 앞에 나온 length Method를 사용하여 for 반복문으로 checkbox의 갯수 만큼 checked Property로 반복 확인하는 과정이 필요합니다. 다른 input type보다 쩜 복잡하므로 주의해서 보아야 되겠습니다.
length Method를 시용하여 선택된 checkbox 갯수 count 하기
<html>
<head>
<title>checkbox가 몇 개 check 되었는지 카운트하기</title>
<script type="text/javascript">
<!--
function checked_count(){
var txt = ""
var chk_count = 0
for (i = 0; i < document.sample.web.length; i++){
if (document.sample.web[i].checked){
chk_count ++
txt = txt + document.sample.web[i].value + " "
}
}
alert(txt + ": " + chk_count + " 개 check 되었습니다.")
}
// -->
</script>
</head>
<body>
<form name="sample">
<input type="checkbox" name="web" value="HTML" />HTML
<input type="checkbox" name="web" value="PHP" />PHP
<input type="checkbox" name="web" value="ASP" />ASP
<input type="button" value="몇 개?" onclick="checked_count()" />
</form>
</body>
</html>
