0
191
ViewsGet value from a selected option in a dynamic list retrieving data from MySQL with PHP
Context: I'm trying to create a dynamic list so that the options are specific tickers available in my MySQL database. The query is fine since I can see the data when calling the variable and when doing console.log(dropdown) I can also see all the options created (as seen in the picture). However, when I click on a given ticker, I only get the data for the first element on this array (which is "A"). I've tried using a event listener to get the value of the ticker that the person is choosing, but this doesn't seem to be working.
Minimal reproducible code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="..." method = "post">
<input list="brow" id="name" name="name" placeholder="Enter a Stock" autocomplete="on" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;">
<datalist id="brow" name="brow">
<select id="selectStock" name="selectStock">
</select>
</datalist>
</body>
<script>
var dropdown = document.getElementById("selectStock");
//let options = <?php echo json_encode($tickerArray) ?>; //get data from MySQL tickers
let options = [
["A"],
["AAPL"],
["TSLA"],
["HOOD"]
]
console.log(dropdown.value)
for (var i = 0; i < options.length; i++) {
var list = options[i]; //save every option as opt
var opt = document.createElement("option");
opt.innerHTML = list; //change the HTML so that the newly added element for a select option is equal to the tickers in opt
opt.value = list; //give the value of the element created as the ticker name
dropdown.appendChild(opt); //append the latest element created to the select options
}
dropdown.addEventListener('change', function() {
console.log('You selected: ', this.value);
});
</script>
</html>What could I do so that when the user presses one of the dynamically created options, I can retrieve the value of that ticker chosen?
Thank you in advance!
2 answers
Answer question0
You can manually check it on change. But you need to check change of the input of datalist. In browser with the inputType property on the InputEvent you can use that to filter out any unwanted onInput events. This is "insertReplacementText" on Firefox 81 and null for Chrome/Edge 86. If you need to support IE11 you will need to validate the value is valid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="..." method="post" id="form">
<input list="brow" id="name" name="name" placeholder="Enter a Stock" autocomplete="on" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;">
<datalist id="brow" name="brow">
<select id="selectStock" name="selectStock">
<select id="sort">
</select>
</select>
</datalist>
</body>
<script>
var dropdown = document.getElementById("selectStock");
//let options = <?php echo json_encode($tickerArray) ?>; //get data from MySQL tickers
let options = [
["A"],
["AAPL"],
["TSLA"],
["HOOD"]
]
for (var i = 0; i < options.length; i++) {
var list = options[i]; //save every option as opt
var opt = document.createElement("option");
opt.innerHTML = list; //change the HTML so that the newly added element for a select option is equal to the tickers in opt
opt.value = list; //give the value of the element created as the ticker name
dropdown.appendChild(opt); //append the latest element created to the select options
}
document.getElementById("name")
.addEventListener("input", function(event){
if(event.inputType == "insertReplacementText" || event.inputType == null) {
console.log('You selected: ',event.target.value);
event.target.value = "";
}
})
</script>
</html>0
Datalist is not an html tag. Change it to div. It works then