CODEWITHSUNDEEP
javascripthtmlhtml-datalist
PaulJames
PaulJames

Reputation: 95

Appending to Datalist Via Javascript

I am attempting to populate a datalist via javascript, but failing miserably. The code below looks ok (to me) - but obviously is not.

I need the datalist to be populated off an array and eventually embeded within PHP echo 

<html>
<head>

<script type="text/javascript">

function populate()
{
 var cars = ["Saab", "Volvo", "BMW"];   
 var counter=0; 

 for (counter=0; counter<cars.length; counter++)
 {   
  options +='<option value='+cars[counter]+'/>';     
  document.getElementById('mylist').innerHTML = options;
 }
}

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
<option value="address1">
<option value="address2">
</datalist>


 <input type="button" onclick="populate();" >

</body>
</html>

Upvotes: 0

Views: 1091

Answers (3)

mrityunjoynath
mrityunjoynath

Reputation: 95

Solution

You had missed it in quite of the places. Common mistakes.

Like you were declaring new option variable with each iterator. You have to declare it outside loop. Study the code to know your mistakes.

Best of luck!

<html>
    <head>

    <script type="text/javascript">

    function populate()
    {
        var cars = ["Saab", "Volvo", "BMW"];   
        var counter=0; 
        var options = document.getElementById('mylist').innerHTML;
        for (counter=0; counter<cars.length; counter++)
        {   
            options +='<option value='+cars[counter]+'>';     
        }
        document.getElementById('mylist').innerHTML=options;
    }

    </script>


    </head>
    <body>



    <input list="mylist" />

    <datalist id="mylist">
    <option value="address1">
    <option value="address2">
    </datalist>

    <input type="button" onclick=populate() value="POPULATE">

    </body>
    </html>

Upvotes: 0

Charlie
Charlie

Reputation: 23778

Only few places to be changed to make your code run.

  1. You need to define options before the loop
  2. You should add the innerHTML only after you prepare the full list of options

Also few other places in your code are optimized.

<html>
 <head>

  <script type="text/javascript">

   function populate()
   {
     var cars = ["Saab", "Volvo", "BMW"]; 
     var options = "";
     
     for (var counter=0; counter<cars.length; counter++) {   
        options +='<option value=" ' +cars[counter] + '">';  
     }
  
    
 
     document.getElementById('mylist').innerHTML = options; 
   }

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
  <option value="address1">
  <option value="address2">
</datalist>


 <input type="button" onclick="populate();" value="populate" >

</body>
</html>

Upvotes: 1

JSONaLeo
JSONaLeo

Reputation: 416

It seems like the only problem with your code is that you forgot to define the variable "options". I got this from the error returned when running your code as is:

"message": "Uncaught ReferenceError: options is not defined"

by including var options = ''; in your variable declarations, it looks like it does what you want. I also removed the forward slash from the line options +='<option value='+cars[counter]+'/>'; as it was appending that to the end of each option in the select.

There are certainly other ways to achieve the same results, but this proves that the approach you were taking works with just one additional line of code.

<html>
<head>

<script type="text/javascript">

function populate()
{
 var cars = ["Saab", "Volvo", "BMW"];   
 var counter=0; 
 var options = '';

 for (counter=0; counter<cars.length; counter++)
 {   
  options +='<option value='+cars[counter]+'>';     
  document.getElementById('mylist').innerHTML = options;
 }
}

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
<option value="address1">
<option value="address2">
</datalist>


 <input type="button" onclick="populate();" >

</body>
</html>

Best of luck! Hopefully this helps you out.

Upvotes: 0

Related Questions