Question

193

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

rated 0 times [ 197] [ 4] / answers: 1 / hits: 29809 / 11 Years ago, thu, august 15, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 11 Years ago josefinap · Accepted Answer

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