목차
- onchange 예제 - <select> 경우
- onchange 정의
- onchange 구문
- onchange 예제 - <input> 경우
- onchange 예제 - <textarea> 경우
- onchange 예제 - <select> AJAX GET 방식
- onchange 예제 - <select> AJAX POST 방식
onchange 예제 - <select> 경우
<select id="hz" onchange="homzzang()">
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
<option value="php">php</option>
</select>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").value;
document.getElementById("demo").innerHTML = "선택값: " + x;
}
</script>
결과보기
onchange 정의
요소값 변경 시 실행할 스크립트 내용 지정.
1. onchange 속성 사용 가능 태그 종류
<input>, <select>, <textarea>
- <input> 태그 중 사용 가능 type 종류: checkbox, file, password, radio, range, search, text
2. cf.
- oninput 속성 - 요소값이 바뀌는 순간 실행됨.
- onchange 속성 - 요소값이 바뀌고 포커스 읽는 순간 실행됨.
3.
모든 브라우저 지원.
onchange 구문
HTML 방식
- <element onchange="myScript">
JS 방식 (3가지)
- object.onchange = ()=>{myScript};
- object.onchange = function(){myScript};
- object.addEventListener("change", myScript);
[속성값]
myScript
요소값 변경 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
onchange 예제 - <input> 경우
텍스트 입력: <input type="text" name="hz" value="홈짱닷컴 Homzzang.com" onchange="homzzang(this.value)">
<script>
function homzzang(val) {
alert("새 입력값: " + val);
}
</script>
결과보기
onchange 예제 - <textarea> 경우
자기소개 입력:<textarea name="self" onchange="homzzang(this.value)"></textarea>
<script>
function homzzang(val) {
alert("변경된 값: " + val);
}
</script>
결과보기
onchange 예제 - <select> AJAX GET 방식
/select.php
<select id="hz">
<option>언어선택</option>
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
<option value="php">php</option>
</select>
<p id="demo">선택값 표시</p>
<script>
var hz = document.getElementById("hz");
var demo = document.getElementById("demo");
hz.onchange = function() {
// 선택된 값 가져오기
var hzvalue = hz.value;
// AJAX 요청 보내기
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) { // 요청 성공 시, 결과 표시
demo.innerHTML = this.responseText;
}
};
xhr.open("GET", "process.php?selected=" + hzvalue, true);
xhr.send();
};
</script>
/process.php
<?php
// 선택값 받기
$selected = $_GET["selected"];
// 선택값별 처리
switch ($selected) {
case "html":
$result = "HTML: 구조";
break;
case "css":
$result = "CSS: 디자인";
break;
case "js":
$result = "JavaScript: 동작";
break;
case "php":
$result = "PHP: 서버처리";
break;
default:
$result = "선택값 없음";
}
// 결과 반환
echo $result;
?>
onchange 예제 - <select> AJAX POST 방식
/select.php
<select id="hz">
<option>언어선택</option>
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
<option value="php">php</option>
</select>
<p id="demo">선택값 표시</p>
<script>
var hz = document.getElementById("hz");
var demo = document.getElementById("demo");
hz.onchange = function() {
// 선택된 값 가져오기
var hzvalue = hz.value;
// AJAX 요청 보내기
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) { // 요청 성공 시 결과 표시
demo.innerHTML = this.responseText;
}
};
xhr.open("POST", "process.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("selected=" + hzvalue);
};
</script>
/process.php
<?php
// 선택값 받기
$selected = $_POST["selected"];
// 선택값별 처리
switch ($selected) {
case "html":
$result = "HTML: 구조";
break;
case "css":
$result = "CSS: 디자인";
break;
case "js":
$result = "JavaScript: 동작";
break;
case "php":
$result = "PHP: 서버처리";
break;
default:
$result = "선택값 없음";
}
// 결과 반환
echo $result;
?>
PS. GET/POST 방식의 process.php 파일 경우, 보안 처리 코드 추가 필요.
