공부/Web
JAVASCRIPT :: onchange
린구
2022. 4. 17. 15:40
반응형
onchange
onchange 속성은 사용자가 선택한 내용이 변경되었는지 감지한다.
따라서 onchange 속성 안에 함수를 넣는다면,
내용이 변경되었을 때 해당 함수를 자동으로 호출할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function formChange(obj)
{
//alert(obj);
//-- [object HTMLFormElement]
// ※ obj 변수(이 함수의 매개변수)에는 form 객체가 저장되어 있다.
// 필요에 따라 전송하기 전에 검증 절차를 추가하는 것이 가능하다.
obj.submit();
//-- 『폼.submit()』 폼.reset()
// 함수 호출을 통해 form 객체의 데이터를
// 서버로 전송하는 것이 가능하다.
}
</script>
<title>Send05.html</title>
</head>
<body>
<div>
<h2>구구단 입력</h2>
단 수 선택
<form name="fm" action="Receive05.jsp" method="get">
<select name="userSelect" onchange="formChange(this.form)">
<option>선택</option>
<option>1단</option>
<option>2단</option>
<option>3단</option>
<option>4단</option>
<option>5단</option>
<option>6단</option>
<option>7단</option>
<option>8단</option>
<option>9단</option>
</select>
</form>
</div>
</body>
</html>
위의 코드를 보면 select 태그 속성에서 onchange 속성을 통해 formChange 함수를 호출하고 있다.
formChange 함수를 호출하면서 매개변수로 this.form 을 넘겨주어
select 태그를 자식으로 갖고 있는 from 태그를 매개변수로 넘겨주고 있다.
함수 formChange 에서는 매개변수로 넘겨받은 form 객체를 submit 한다.
따라서 해당 페이지는 사용자가 선택한 내용이 변경되었을 시 submit 하게 된다.
반응형