Why can't the edit-modal fetch the data(of the selected row) from my database?

Question

So this is my brand.php file And it portrays the edit part of the brand so in this part we can probably see how the thing will look like

    <!-- edit brand -->
    <div class="modal fade" id="editBrandModel" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

            <form class="form-horizontal" id="editBrandForm" action="php_action/editBrand.php" method="POST">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="fa fa-edit"></i> Edit Brand</h4>
              </div>
              <div class="modal-body">

                <div id="edit-brand-messages"></div>

                <div class="modal-loading div-hide" style="width:50px; margin:auto;padding-top:50px; padding-bottom:50px;">
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>

                  <div class="edit-brand-result">
                    <div class="form-group">
                        <label for="editBrandName" class="col-sm-3 control-label">Brand Name: </label>
                        <label class="col-sm-1 control-label">: </label>
                            <div class="col-sm-8">
                              <input type="text" class="form-control" id="editBrandName" placeholder="Brand Name" name="editBrandName" autocomplete="off">
                            </div>
                    </div> <!-- /form-group-->                      
                    <div class="form-group">
                        <label for="editBrandStatus" class="col-sm-3 control-label">Status: </label>
                        <label class="col-sm-1 control-label">: </label>
                            <div class="col-sm-8">
                              <select class="form-control" id="editBrandStatus" name="editBrandStatus">
                                <option value="">~~SELECT~~</option>
                                <option value="1">Available</option>
                                <option value="2">Not Available</option>
                              </select>
                            </div>
                    </div> <!-- /form-group-->  
                  </div>                    
                  <!-- /edit brand result -->

              </div> <!-- /modal-body -->

              <div class="modal-footer editBrandFooter">
                <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>

                <button type="submit" class="btn btn-success" id="editBrandBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
              </div>
              <!-- /modal-footer -->
            </form>
             <!-- /.form -->
        </div>
        <!-- /modal-content -->
      </div>
      <!-- /modal-dailog -->
    </div>
    <!-- / add modal -->
    <!-- /edit brand -->

> --this one is the end part

And this is the fetching part, wherein once you click the button from the row(example row 1), a modal(Edit Modal will likely appear), but the thing is, once the modal appear, the data that is supposed to be fetched from the row is not on that modal ;-;

        <?php   

    require_once '../../includes/connection.php';

    $brandId = $_POST['brandId'];

    $sql = "SELECT brand_id, brand_name, brand_active, brand_status FROM brands WHERE brand_id = $brandId";
    $result = $connect->query($sql);

    if($result->num_rows > 0) { 
     $row = $result->fetch_array();
    } // if num_rows

    $connect->close();

    echo json_encode($row);
?>

Now the JScript part This part is the filler part(like getting the data and now portraying the data and filling the input boxes etc..)

function editBrands(brandId = null) {
        if(brandId) {
            // remove hidden brand id text
            $('#brandId').remove();

            // remove the error 
            $('.text-danger').remove();
            // remove the form-error
            $('.form-group').removeClass('has-error').removeClass('has-success');

            // modal loading
            $('.modal-loading').removeClass('div-hide');
            // modal result
            $('.edit-brand-result').addClass('div-hide');
            // modal footer
            $('.editBrandFooter').addClass('div-hide');

            $.ajax({
                url: 'fetchSelectedBrand.php',
                type: 'post',
                data: {brandId : brandId},
                dataType: 'json',
                success:function(response) {
                    // modal loading
                    $('.modal-loading').addClass('div-hide');
                    // modal result
                    $('.edit-brand-result').removeClass('div-hide');
                    // modal footer
                    $('.editBrandFooter').removeClass('div-hide');

                    // setting the brand name value 
                    $('#editBrandName').val(response.brand_name);
                    // setting the brand status value
                    $('#editBrandStatus').val(response.brand_active);
                    // brand id 
                    $(".editBrandFooter").after('<input type="hidden" name="brandId" id="brandId" value="'+response.brand_id+'" />');

                    // update brand form 
                    $('#editBrandForm').unbind('submit').bind('submit', function() {

                        // remove the error text
                        $(".text-danger").remove();
                        // remove the form error
                        $('.form-group').removeClass('has-error').removeClass('has-success');           

                        var brandName = $('#editBrandName').val();
                        var brandStatus = $('#editBrandStatus').val();

                        if(brandName == "") {
                            $("#editBrandName").after('<p class="text-danger">Brand Name field is required</p>');
                            $('#editBrandName').closest('.form-group').addClass('has-error');
                        } else {
                            // remov error text field
                            $("#editBrandName").find('.text-danger').remove();
                            // success out for form 
                            $("#editBrandName").closest('.form-group').addClass('has-success');     
                        }

                        if(brandStatus == "") {
                            $("#editBrandStatus").after('<p class="text-danger">Brand Name field is required</p>');

                            $('#editBrandStatus').closest('.form-group').addClass('has-error');
                        } else {
                            // remove error text field
                            $("#editBrandStatus").find('.text-danger').remove();
                            // success out for form 
                            $("#editBrandStatus").closest('.form-group').addClass('has-success');       
                        }

                        if(brandName && brandStatus) {
                            var form = $(this);

                            // submit btn
                            $('#editBrandBtn').button('loading');

                            $.ajax({
                                url: form.attr('action'),
                                type: form.attr('method'),
                                data: form.serialize(),
                                dataType: 'json',
                                success:function(response) {

                                    if(response.success == true) {
                                        console.log(response);
                                        // submit btn
                                        $('#editBrandBtn').button('reset');

                                        // reload the manage member table 
                                        manageBrandTable.ajax.reload(null, false);                                                                          
                                        // remove the error text
                                        $(".text-danger").remove();
                                        // remove the form error
                                        $('.form-group').removeClass('has-error').removeClass('has-success');

                                $('#edit-brand-messages').html('<div class="alert alert-success">'+
                            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                            '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
                          '</div>');

                                $(".alert-success").delay(500).show(10, function() {
                                            $(this).delay(3000).hide(10, function() {
                                                $(this).remove();
                                            });
                                        }); // /.alert
                                    } // /if

                                }// /success
                            });  // /ajax                                               
                        } // /if

                        return false;
                    }); // /update brand form

                } // /success
            }); // ajax function

        } else {
            alert('error!! Refresh the page again');
        }
    } // /edit brands function

Answer 1

Can you check the Network tab to see the result from server? You can debug your app by seeing that result.

By the way, there're two things that you may need to edit:

1/ If brandId is interger, you need to get it from $_GET by intval($_POST['brandId']) to prevent SQL Injection.

2/

if($result->num_rows > 0) { 
   $row = $result->fetch_array();
}
else {
   $row = array();
}

your code need to return empty array if sql result is empty to avoid Undefined variable error.