I can't get the value of a input within a datalist?

html, html-datalist, input, javascript

Solution

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

Problem

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:

Original source