从ajax加载数据

I have the following code that I would like to use to generate a page where I select a choice from a drop-down menu, then the selected choice's html should load, but right now it does not load.

<form>
    <fieldset>
        <legend>Select transaction type:</legend>
        <select name="stakeholders" onchange="fetchStakeholder(this.value)">
            <option value="">Select a Stakeholder:</option>
            <option value="CHALS">CHALS</option>
            <option value="juggernaut">juggernaut</option>
            <option value="STFU CHALS">STFU CHALS</option>
        </select>

        <script type="text/javascript">
            function fetchStakeholder(name) {
                if(name.length ==0){
                    return;
                }
                var request = new XMLHttpRequest();
                request.onreadystatechange=function(){
                    if(request.readyState==4 && request.status == 200){
                        document.getElementById("stakeholder").innerHTML=
                                request.responseText;
                    }

                }

                request.open("POST","stakeholder.php",true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                request.send("stakeholder=" + name);
            }


        </script>

    </fieldset>
</form>

Then in a PHP file:

<?php
    if($_SERVER["REQUEST_METHOD"] == "POST" ){
        $stakeholder = $_POST["stakeholder"];
        if($stakeholder === "CHALS"){
            include("CHALS.html");
        }elseif ($stakeholder === "juggernaut"){
            include("CHALS.html");
        }elseif ($stakeholder === "STFU CHALS"){
            include("STFU.html");
        }    
    }
?>

You are getting nothing because you don't have element with id stakeholder. This element can be anything div,span, input, select. I am using div here.

<form>
    <fieldset>
        <legend>Select transaction type:</legend>
        <select name="stakeholders" onchange="fetchStakeholder(this.value)">
            <option value="">Select a Stakeholder:</option>
            <option value="CHALS">CHALS</option>
            <option value="juggernaut">juggernaut</option>
            <option value="STFU CHALS">STFU CHALS</option>
        </select>
        <div id="stakeholder"></div>

        <script type="text/javascript">
            function fetchStakeholder(name) {
                if(name.length ==0){
                    return;
                }
                var request = new XMLHttpRequest();
                request.onreadystatechange=function(){
                    if(request.readyState==4 && request.status == 200){
                        document.getElementById("stakeholder").html=
                                request.responseText;
                    }

                }

                request.open("POST","stakeholder.php",true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                request.send("stakeholder=" + name);
            }


        </script>

    </fieldset>
</form>