AJAX seems to be sending entire web page script rather than data

Question

I am having real trouble with my AJAX request and I am not sure why. The following code seems to send to the entire web page script (as seen in both my alert box and in the console) rather than my checkbox values. Can anyone explain to me what I am doing wrong? Here is my PHP checkbox, which has values generated by SQL, and has no submit button so the code is set up to run on change from the user:

<form id="numberOrderForm" action="testdatabase.php" method="post">
   <div class="wrappers" id="multi-select1Wrapper">
        <h2>Area Code</h2>
        <select class="dropDownMenus" id="multi-select1" name="multi_select1[]" multiple="multiple">
            <?php
                //The query asking from our database
                $areaCodeSQL = "SELECT ac.Number AS `AreaCode`, ac.Name AS `AreaName`
                                FROM `AreaCodes` ac";                                                               //SQL query: From the table 'AreaCodes' select 'Number' and put into 'AreaCode', select Name and put into 'AreaName'

                $areaCodeResults = $conn->query($areaCodeSQL);                                                      // put results of SQL query into this variable

                if ($areaCodeResults->num_rows > 0) {                                                               // if num_rows(from $results) is greater than 0, then do this:
                    // output data of each row
                                foreach($areaCodeResults as $areaCodeResult)                                        //for each item in $areCodeResults do this:
                                    {
                                        $areaNameAndCode =  $areaCodeResult['AreaCode'] ." ". $areaCodeResult['AreaName'];  //get AreaCode and AreaName from query result and concat them
                                        $areaName = $areaCodeResult['AreaName'];                                    // get AreaName
                                        $areaCode = $areaCodeResult['AreaCode'];                                    //get AreaCode

                                        ?><option class="menuoption1" name="menuAreaCode" value="<?php echo $areaCode ?>"  ><?php echo $areaNameAndCode; ?></option><?php  //Create this option element populated with query result variables
                                    }
                } 

            ?>
        </select>
    </div>
</form>

And here is my jQuery AJAX code:

<script>
        $('#multi-select1').on("change", function(){
            var areaCode = $(this).val();

            $.ajax({
                type:"POST",
                url: "testdatabase.php", //my PHP database
                data: "areacode=" + areaCode,
                success: function(response){
                //do stuff after the AJAX calls successfully completes
                    alert (response);
                    console.log(response);
                },
                error : function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        });

</script>

Answer 1

your data is incorrect for one.

replace:

data: "areacode=" + areaCode,

with:

data: {"areacode": areaCode},

you should also add: enctype='multipart/form-data' to your form element

Answer 2

Please add following line on jquery ajax call

dataType: 'json'
contentType: "application/json",

After add above code your code is like below

<script>
        $('#multi-select1').on("change", function(){
            var areaCode = $(this).val();

            $.ajax({
                type:"POST",
                url: "testdatabase.php", //my PHP database
                data: "areacode=" + areaCode,
                dataType: 'json',
                contentType: "application/json",
                success: function(response){
                //do stuff after the AJAX calls successfully completes
                    alert (response);
                    console.log(response);
                },
                error : function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        });

</script>