I have a datalist box that looks like this:
<td>
<input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
<datalist id="screens.screenid-datalist">
<option value="Login"></option>
<option value="ScreenCreator"></option>
</datalist>
<label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
</td>
and I have a JavaScript code which has to get the value from this datalist.
I tried all the following things to get the value
document.getElementById('screens.screenid').value
document.getElementById('screens.screenid').text
document.getElementById('screens.screenid').innerHTML
document.getElementById('screens.screenid').option
and it just does not seem to work.
Is there something wrong with my JavaScript or with my HTML code?
when I use the console to get the value:
Took sometime to figure this out. Look at my code below :
function validate(){
console.log(document.getElementById('screens.screenid').value); //WORKS
console.log(document.getElementById('screens.screenid').text);
console.log(document.getElementById('screens.screenid').innerHTML);
console.log(document.getElementById('screens.screenid').option);
}
<input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
<datalist id="screens.screenid-datalist">
<option value="Login"></option>
<option value="ScreenCreator"></option>
</datalist>
<label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
<a href='#' onclick="validate">validate</a>
Now the first one will get the value
as expected, but the text
option
will not work for the obvious reason that you do not have text here. Also, innerHTML
will get you the child html and not the value. Further more , you can't get innerHTML
of an input list, but you can get it for the datalist.
Try this : console.log(document.getElementById('screens.screenid-datalist').innerHTML);
I tried it and got the innerHTML
without any hassle :
<option value="Login"></option>
<option value="ScreenCreator"></option>
Find the bin here : http://jsbin.com/inigaj/1/edit