[attribute] HTML - onchange 속성 ★ - 요소값 변경 이벤트 시 실행 (= onchange속성 = 온체인지속성) ※ onchange이벤트 = 온체인지이벤트 ※ AJAX (아작스/에이잭스) GET/POST 방식

1. onchange 예제 - <select> 경우
2. onchange 정의
3. onchange 구문
4. onchange 예제 - <input> 경우
5. onchange 예제 - <textarea> 경우
6. onchange 예제 - <select> AJAX GET 방식
7. 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 파일 경우, 보안 처리 코드 추가 필요.