Skip to main content

Tedshd's Dev note

JavaScript - Get & Set some value about form input type and select

Table of Contents

# JavaScript - Get some value about form input type and select

## Select

<select id="select_data">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>
var e = document.getElementById('select_data');
var strUser = e.options[e.selectedIndex].value;

If want to set selected

var e = document.getElementById('select_data');
e.querySelectorAll('option')[2].selected = true;

Get change option

document.querySelector('#select_data').addEventListener('change', function (e) {
	var _this = this.options[this.selectedIndex];
});

## radio

<div class="row">
  <p class="col">device</p>
  <div class="row col s12 m2">
    <input name="group1" type="radio" id="device_water_1" value="1" checked />
    <label for="device_water_1">True</label>
  </div>
  <div class="row col s12 m2">
    <input name="group1" type="radio" id="device_water_2" value="2" />
    <label for="device_water_2">False</label>
  </div>
</div>
// for IE9 up
var val = document.querySelector('input[name="group1"]:checked').value;

// full support
var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
  if(rates[i].checked){
  	rate_value = rates[i].value;
  }
}

Refer - html select - Get selected value in dropdown list using JavaScript? - Stack Overflow

Refer - javascript - How to get value of selected radio button? - Stack Overflow