JSON not working with OnChange event

Question

I originally coded this piece to bring back a single data point. I realized I needed more fields returned with an onchange event (drop down select) and changed it to use JSON. It is not returning any data. The drop down is built dynamically through PHP when the page is first loaded. I'm new to this, so any help would be much appreciated.

Dropdown Code:

<p id="dropdown"   style="DISPLAY: none" >
        <?php
            $query = "call test.spsMSTR_AllCatListBuild";
            $stmt = $conn->query( $query );

            $dropdown = "<select id='catlist' name='catlist' onchange='getval(this);'>";
                $dropdown .= "\r\n<option value= 'NA'>Select Category</option>";
                foreach ($stmt as $row) {
                  $dropdown .= "\r\n<option value='{$row['ID']}'>{$row['RPT_NAME']}</option>";
                }

                $dropdown .= "\r\n</select>";
                echo $dropdown;
                $conn = null;
        ?>
    </p>

Ajax/JSON code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script id="source" language="javascript" type="text/javascript">

       $(document).ready(function(){
            $("#catlist").change(function(){
            var vid = document.getElementById("catlist").value;

            $.getjson("ajax.php",
            {catid:vid},
            function(result){
                alert(result); }
                .error(function(xhr) {
                    alert(xhr)
                })
                ; )
        })})

  </script>

PHP Code:

<?php include('./DBConfig.php'); ?>
<?php

    $vid = $_GET["catid"];
    $query =  "SELECT RPT_NAME, ACTIVE FROM test.MSTR_REPORT_MASTER WHERE ID = $vid" ;
    $stmt = $conn->query( $query );
    //$result = $stmt->fetchColumn();
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    echo json_encode($result);
?>

Answer 1

So, I have corrected your errors and you should have the below for it to work with no errors, unless there is something else that is causing errors.

<select id='catlist' name='catlist'>
    <option value='NA'>Select Category</option>
    <option value='id1'>val1</option>
    <option value='id2'>val2</option>
    <option value='id3'>val3</option>
</select>

$(function(){
    $("#catlist").change(function() {
        var sVal = $(this).val();
        if (sVal !== "NA") { // I am assuming you don't want to make an ajax call when the value is 'NA'!
            $.getJSON("ajax.php", {catid: $(this).val()}, function(result) {
                alert(result); 
            });
            //by the way $(this).val() = id1|id2|id3
        }
    });
});

Answer 2

Well if you format your code, you can see your problem.

$(document).ready(function() {
  $("#catlist").change(function() {
    var vid = document.getElementById("catlist").value;

    $.getjson("ajax.php", {
        catid: vid
      },
      function(result) {
        alert(result);
      }
      .error(function(xhr) {   //<-- error inside getJSON
        alert(xhr)
      });)                     //<-- a random )
  })
})

and

You have an inline event onchange='getval(this);' but you do not have a function getval listed.