Jacques Koekemoer Jacques Koekemoer - 3 years ago 98
Javascript Question

cant get the value of a input with a datalist

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:
when I use the console to get the value

Answer Source

Took sometime to figure this out. Look at my code below :

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <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>
</body>
</html>

Javascript:

function validate( id, id1, text){
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);

}

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download