Question 101462 in Html Question posted in
Some basic documentation can be found here.

Html – Can not receive value from a data-list

I’ve tried countless ways now to receive the value of this data-list when the user clicks the button to pass the information to the APIs and return the data. I am trying to receive these country names to pass them to another API to receive the country code to pass into the others. I’ve tried everything my novice self knows, and I either get null or it throws an error because I tried to pass null to a variable I already stated was to be a string.

The HTML

<input
            name="countryText"
            list="countrySelect"
            placeholder="Start typing..."
            id="'countryList"
            type="text"
          />
          <datalist id="countrySelect">
            <option value="United States"></option>
            <option value="Afghanistan"></option>
            <option value="Albania"></option>

The data-list continues and every value is that of the respective country

Just one of the iterations of JS I’ve tried to collect the value

searchBtn.addEventListener('click', async () =>{
    textValue = textBox.value.toLowerCase();
    countryValue = countrySelect.value;
    console.log(countryValue);

And earlier in the code I collect that element by ID and assign it to countrySelect
const countrySelect = document.getElementById('countryList');

And yes I have seen solutions with JQuery but I have to do mine with vanilla

I’ve tried everything my novice self knows, and I either get null or it throws an error because I tried to pass null to a variable I already stated was to be a string.

Tags:

3

Answers


  1. 0

    This should work fine, kept your toLowerCase in case you need it, provided that you have a already managed to grab the search button and put it in the variable searhBtn:

    searchBtn.addEventListener('click', async () => {
  let country = document.querySelector('input[name="countryText"]').value.toLowerCase();
  console.log(country);
});

    Some points:

    • It seems unnecessary to have an id on the countryText input since you can grab it by name, both in js and in your css if needed.
    • Unless you are going to fetch something – maybe you are (you mentioned API:s) – or do something else async/await you might not have to keep ‘async’ on the event listener function.
    Login or Signup to reply.
  2. 0

    Try to change id="'countryList" to id="countryList"
    looks like vanilla js is not getting the required string value. whereas jQuery already filters it

    Login or Signup to reply.
  3. 0

    id of the input is different from the value given in js.

    input element id = ‘countryList
    id in the js = countryList

    I have added a snippet with your code. please check

    var countrySelect = document.getElementById("countryList");

const searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', async () =>{
    countryValue = countrySelect.value;
    console.log(countryValue);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script>


<input name="countryText" list="countrySelect" placeholder="Start typing..."
            id="countryList"
            type="text"
          />
          <datalist id="countrySelect">
            <option value="United States"></option>
            <option value="Afghanistan"></option>
            <option value="Albania"></option>
           </datalist>
     <button id="searchBtn">Search</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search