Populate html dropdown list using Ajax function call during page load

debugcn Published at Dev

user2887201

I have a dropdown list that needs to be populated with contents from a json file. I have a php file that can parse this json file and echo the required output.

Here's my json,

<?php
        $filecontents = file_get_contents('users.txt');

        $jsonIterator = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($filecontents, TRUE)),RecursiveIteratorIterator::SELF_FIRST);

        foreach ($jsonIterator as $key => $val) {
                if(!is_array($val) && $key == "templatename"){
                        echo '<option>'.$val.'</option>';
                }
        }
?>

Here's my html page,

<script>
         window.onload = function() {
              loadTest();
         };

        function loadTest()
        {
                var xmlhttp=new XMLHttpRequest();
                document.getElementById("testdropdown").innerHTML=xmlhttp.responseText;

                xmlhttp.open("get","2test.php",true);
                xmlhttp.send();
        }
</script>


<select name="test dropdown" id="testdropdown"></select>

The ajax query I make doesn't seem to work.

This is the output from my php file,

<option>1-1</option><option>1-2</option>

user2887201

Turns out I had missed out on a couple of lines of code,

            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function()
            {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                            document.getElementById("testdropdown").innerHTML=xmlhttp.responseText;
                    }
            }
            xmlhttp.open("get","2test.php",true);
            xmlhttp.send();

This seems to fix it.

Collected from the Internet

Please contact [email protected] to delete if infringement.