No puedo conseguir la variable pasada en la función JS en otra página php donde varibale se utiliza en la consulta

Estoy intentando pasar una variable JS a la función AJAX donde esta variable se utiliza en la consulta sql. Más adelante, esto devuelve datos en la matriz codificada en json. (Actualmente he editado código para pasar el archivo php como acción en el formulario enviar para depurar los errores)

He probado otro método de pasar datos a la función AJAX como datos: "categoryid"+catid

Función JS:

function products(category){
        var catid = category.value
        console.log(catid)
        if(catid==''){
            document.getElementById("productname").value='';
        }else{
            $.ajax({
            url: "getProductName.php",
            type: 'POST',
            data: {
                categoryId: catid
            },
            success: function(response){
                var len=response.length;
                console.log("array length"+len)
                for(var i=0;i<len;i++){
                    var name = response[i].name;
                    console.log("name is: "+name)
                    var dat = "<option value=" + name + "></option>"
                }
            $("#productname").append(dat);
                }
            })
        }
    }

llamando a la función JS:

    <select class="form-control" id="productcategory"
    name="productcategory" onchange="products(this);">

php donde se pasa la variable JS.

    <?php
        session_start();
        require_once '../config/connect.php';
        $cat = $_POST['categoryId'];
        echo $cat;
        $query = "SELECT * FROM `products` WHERE catid='$cat'";
        echo $query;
        $result = mysqli_query($connection, $query);
        while($r = mysqli_fetch_assoc($result)){
            $prodname = $r['name'];
            echo $prodname;
            $product_arr[] = array("name" => $prodname);
        }
        echo json_encode($product_arr);
        ?>