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); } 
