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