42. Події елементів форм

Події:
onchange - подія відбувається при зміні стану чекбоксу, радіокнопки, селектору
oninput - подія відбувається при зміні в input type="text"

Властивості елементів:
checked — містить булеве значення true або false, в залежності від того, відмічений чекбокс чи ні
name — відповідає атрибуту name тега input
value — відповідає атрибуту value тега input
type — відповідає атрибуту type тега input
elem.options[elem.selectedIndex].textContent - доступ до тексту обраного option в селекторі

Приклади

 elem1.onchange = ff1;
 
 function ff1() {
    alert ('Змінилась відміченість чекбоксу');
  };

 <input type="radio" checked="checked" name="rb" onchange = "ff2()"/> 
 <input type="radio" name="rb" onchange = "ff2()"/>

 function ff2() {
    alert ('Змінилась відміченість radio-button');
  };

 <select onchange="alert(this.value)">
    <option value="0">Зробіть вибір</option>
    <option value="1">Варіант 1</option>
    <option value="2">Варіант 2</option>
 </select>

oninput - подія відбувається при зміні в input type="text"

 elem2.oninput = ff3;
 
 function ff3() {
    let val=document.querySelector('#elem2').value;  
    let res=document.querySelector('#elem2').nextSibling.innerHTML = val;
    };

Перемикання чекбоксу через подію на іншому елементі

elem4.onclick = ff4;   
   
 function ff4() {
    let chb=document.querySelector('#chb4');
     
     if (chb.checked==true) {
	 	chb.checked=false;
	 } 
	 else {
	 	chb.checked=true;
	 }
  };

Блокування кнопки

- підтвердіть згоду

chb5.onchange = ff5;
 
 function ff5() {
    let chb5=document.querySelector('#chb5');
   
    let btn5=document.querySelector('#elem5');
     if (chb5.checked==true) {
     	      btn5.disabled=false;
	 } 
	 else {
	 	     btn5.disabled=true;
	 }
  };

Зміни в першому селекторі змінюють другий селектор і навпаки (взаємодія через value)

Перший селектор: другий селектор:

sel6.onchange = ff6;
sel7.onchange = ff6;

function ff6()
{   
  var id=this.id;
  var val=this.value;
  var id2="";
          if(id=='sel6'){
  	               id2="sel7";
           }
         else {
  	              id2="sel6";
          }
  var element = document.getElementById(id2);
  element.value = val;
};

option - доступ до вибраного

Отримуємо id вибраного option

Cелектор з id=se8:

se8.onchange = function () {  
  var id=this.options[this.selectedIndex].id;
  // щоб вибрати записаний в option текст - .text;  
  alert (id);  
 };

далі ✏