Accessing the Value of an Htmlselectelement
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...
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 class="container">
<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" id="day" size="3" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a id="search-btn" 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 id="mySelect">
<option value="firstOption">1</option>
<option value="secondOption">2</option>
</select>
<input type="text" id="myInputText">
<input type="number" id="myInputNumber">
<textarea id="myTextarea"></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);
}
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
