Accessing the value of an HTMLSelectElement
Matthew Barrera 
I am creating a form where my users select some options from checkboxes and dropdown lists.
The intended outcome is a text that is generated dynamically as the users change their choices.
It works but I keep getting “[object HTMLSelectElement]” instead of the value of the selected choice from the dropdown box. How do I get the actual value?
<!DOCTYPE html>
<html lang="en" > <body> <div> <select name = "birthyear" id = "from" size="3" > <option value="1980" >1980</option> <option value="1981">1981</option> <option value="1982">1982</option> </select> <select name = "month" id = "month" size="3" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="day" size="3" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <a href="#">Search</a> </div> </body>
</html>let searchButton = document.getElementById("search-btn");
let searchInput = document.getElementById("from");
let searchInput1= document.getElementById("month");
let searchInput2 = document.getElementById("day");
let summary = document.getElementById("summary");
searchButton.addEventListener("click", findWeatherDetails);
searchInput.addEventListener("keyup", enterPressed);
searchInput1.addEventListener("keyup", enterPressed1);
searchInput2.addEventListener("keyup", enterPressed2);
function enterPressed(event) { if (event.key === "Enter") { findDetails(); }
}
function enterPressed1(event) { if (event.key === "Enter") { findDetails(); }
}
function enterPressed2(event) { if (event.key === "Enter") { findDetails(); }
}
function findDetails() { let searchLink = ""+searchInput+"&targetYear=2019&targetMonth" +searchInput1+"&targetDay="+searchInput2; httpRequestAsync(searchLink, theResponse); }
function theResponse(response) { let jsonObject = JSON.parse(response); summary.innerHTML = jsonObject.summary;
}
function httpRequestAsync(url, callback)
{ console.log("hello"); var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = () => { if (httpRequest.readyState == 4 && httpRequest.status == 200) callback(httpRequest.responseText); } httpRequest.open("GET", url, true); // true for asynchronous httpRequest.send();
}This is the result of the HTTP GET
GET => 500 2 Answers
You need to use .value eg. searchInput1.value
So your search link in findDetails() should be created this way:
let searchLink = "" +
searchInput.value +
"&targetYear=2019&targetMonth" +
searchInput1.value +
"&targetDay=" +
searchInput2.value;You are actually getting [HTMLElement Object] because document.getElementById returns the element itself (so a HTMLElement object), and the element, when converted to string, is represented in that format.
In order to get the value of your inputs (<input>, <select>, <textarea>), you have to pass through their value property.
Check the example below:
// Getting HTMLElement objects here.
const select = document.getElementById('mySelect'), textInput = document.getElementById('myInputText'), numberInput = document.getElementById('myInputNumber'), textarea = document.getElementById('myTextarea');
// Getting their value here (XXX.value).
select.addEventListener('change', () => (console.log(select.value)));
textInput.addEventListener('keyup', () => (console.log(textInput.value)));
numberInput.addEventListener('keyup', () => (console.log(numberInput.value)));
textarea.addEventListener('keyup', () => (console.log(textarea.value)));<select> <option value="firstOption">1</option> <option value="secondOption">2</option>
</select>
<input type="text">
<input type="number">
<textarea></textarea>In your case, you will need to do the following:
function findDetails() { let searchLink = "" + searchInput.value + "&targetYear=2019&targetMonth" + searchInput1.value + "&targetDay=" + searchInput2.value; httpRequestAsync(searchLink, theResponse);
}
