I want to get the value from the datalist and display it in the textarea.
Therefor i used the script “selectProgram”.
But why is there an additional input textfield when i use the select tags?
When i remove “select” the input field dissapears.
I just want the datalist appearing with the values inside.
<!DOCTYPE HTML><html>
<head>
</head>
<body>
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" list="programList">
<select datalist id="programList" onchange="selectProgram()">
<option value="432,325,511">Kopfweh</option>
<option value="1000,45,1">Halsschmerzen</option>
<option value="54,61,10">Grippe</option>
<option value="20,30,50">Asthma</option>
<option value="65,663,123">Entgiftung</option>
</datalist>
</select>
<script>
function selectProgram() {
var programList = document.getElementById("programList");
document.getElementById("text").value = programList.options[programList.selectedIndex].value;
}
</script>
</body>
</html>Advertisement
Answer
Option tags can be in select tags OR datalist tags. Therefor you don’t need both. When you take the datalist you can grab the wanted value directly from the input.
Working example:
function selectProgram() {
document.getElementById("text").value = document.getElementById("list_input").value;
}<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()">
<datalist id="programList">
<option value="432,325,511">Kopfweh</option>
<option value="1000,45,1">Halsschmerzen</option>
<option value="54,61,10">Grippe</option>
<option value="20,30,50">Asthma</option>
<option value="65,663,123">Entgiftung</option>
</datalist>If you only want to see the option descriptions and the numerical values to be hidden you can save them as data attributes. You can grab these with the ordinary value as selector.
Working example:
function selectProgram() {
var input_value = document.getElementById("list_input").value;
var selected_option = document.querySelector('option[value=' + input_value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList" onchange="selectProgram()"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>
You can reset the input with onclick and a second function, that sets the value of the input to an empty string: document.getElementById("list_input").value = ''; If you wants to reset the textarea too then reset their value also in the second function: document.getElementById("text").value = '';
function selectProgram() {
var input_value = document.getElementById("list_input").value;
var selected_option = document.querySelector('option[value=' + input_value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}
function resetInput() {
document.getElementById("list_input").value = '';
document.getElementById("text").value = '';
}<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList" onchange="selectProgram()" onclick="resetInput()"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>
Furthermore you can place the event listeners onchange and onclick directly in the script. In that case you can easily add even more listeners like keyup for example to catch the Escape key.
Working example:
var list_input = document.getElementById("list_input");
function selectProgram() {
var selected_option = document.querySelector('option[value=' + list_input.value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}
function resetInput() {
list_input.value = '';
document.getElementById("text").value = '';
}
list_input.addEventListener('change', selectProgram);
list_input.addEventListener('click', resetInput);
list_input.addEventListener('keyup', function(e) {
if (e.key == 'Escape') {
resetInput();
}
});<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>