Not Getting a POST value from ajax - php

Question

I have a select dropdown and a textfield in my form. So i tried using $.ajax whenever i choose a value in dropdown, the textfield will show an output based on the selected value from the dropdown. But im always getting an error undefined variable from ff.php. I tried to pin down the cause, and what i found is im not getting any POST value in ff.php. Any solution for this ? Thanks in advance.
Here is my code in prs.php
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "ff.php",
data:'productid='+val,
success: function(data){
$("#brandss").val(data);
}
});
}
</script>
<td><select name="drpcode" onchange="getState(this.value)" class="form-control name_list"><?php $drp = mysqli_query($conn,"SELECT productcode FROM products"); while ($dp = mysqli_fetch_array($drp)) {
?><option value="<?php echo $dp['productid']; ?>"><?php echo $dp['productcode']; ?></option><?php } ?></select></td>
<td><input type="text" id="brandss" name="brand" placeholder="Brand" class="form-control name_list" required value=""></td>
Here my codes in ff.php
<?php
require_once("conn.php");
$id = $_POST['productid'];
$query = mysqli_query($conn,"SELECT productbrand FROM products WHERE productid = '$id' ");
while($rs = mysqli_fetch_array($query,MYSQLI_BOTH)) {
$brand = $rs['productbrand'];
}
echo $brand;
?>

Answer 1

Please add the data in json format and specify the datatype as json in ajax function
$.ajax({
url: "ff.php",
type: "POST",
data: {
productid : val
// more fields can be added here
},
dataType: 'json',
success: function(return){
// process success
},
error: function(err) {
// Process failure
}
});

Answer 2

I think the format of ajax data attribute is wrong . You should try this :
data:{productid:val}
UPDATE :
you should select both productid and product code in select statement
<td>
<select name="drpcode" onchange="getState(this.value)" class="form-control
name_list">
<?php $drp = mysqli_query($conn,"SELECT productid,productcode FROM
products");
while ($dp = mysqli_fetch_array($drp)) {
?><option value="<?php echo $dp['productid']; ?>"><?php echo
$dp['productcode']; ?></option><?php } ?>
</select>
</td>
function getState(val) {
$.ajax({
type: "POST",
url: "ff.php",
data:{productid:val},
success: function(data){
$("#brandss").val(data);
}
});
}

Answer 3

Try running the query before select and then display result with loop-
<?php $drp = mysqli_query($conn,"SELECT productcode FROM products"); ?>
<select name="drpcode" onchange="getState(this.value)" class="form-control name_list">
<?php while ($dp = mysqli_fetch_array($drp)) { ?>
<option value="<?php echo $dp['productid']; ?>"><?php echo $dp['productcode']; ?>
</option><?php } ?>
</select>