How to show bootstrap success message in ajax success method ()?

Question

I am using following jQuery/Ajax method to validate a form. I am passing json data to the php file called add.php. Now If add.php page find any error its showing error message otherwise it's showing success message.

Now, In ajax success method I want to show bootstrap success message class if there is no error otherwise a error message class .

To this line :

$('#form_result').append('<p class="alert alert-danger">'+value+'</p>');

Now I can't determine how to check if the result is success.

Jquery/Ajax Code :

<script type="text/javascript">
    $(document).ready(function() {
        $("#add_zone").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url : 'add',
                data : $(this).serialize(),
                dataType : 'json',
                type : 'POST',
                beforeSend : function () {
                    $("#submit_button").val("Wait...");
                },
                success : function ( result ) {
                    $("#submit_button").val("Add New Zone");
                    $('#form_result').html('');
                    $.each( result, function( key, value ) {        
                        if(key !== 'error')  {
                            $('#form_result').append('<p class="alert alert-danger">'+value+'</p>');
                        }
                    });                               
                },
            });
        });        
    });
</script>

add.php page

if(isset($_POST['form_name']) && $_POST['form_name'] == "zone") {
    if(verifyForm('zone', 'add')) { 
        $msg = array();
        $msg['error'] = false;      
        $zone_name = validate_data($_POST['zone_name']);
        $remark = validate_data($_POST['remark']);
        $errors = array();
        $check = mysqli_query($conn, "SELECT zone_name FROM zone WHERE uid ='$uid' AND zone_name = '$zone_name' ");
        $num_check = mysqli_num_rows($check);

        if(isset($zone_name, $remark)) {
            if(empty($zone_name)) {
                $msg[] = 'Zone name required';
                $msg['error'] = true;
            } elseif($num_check > 0 ) {
                $msg[] = 'Zone name already exists, choose another name';
                $msg['error'] = true;
            }

            if(!empty($errors)) {
                  $msg[] = '<div class="alert alert-danger">';
                      $msg[] = '<strong>OPPS! Correct the following error(s):</strong><br/>';
                      foreach($errors as $er) {
                          $msg[] = $er.'.<br/>';
                          $msg['error'] = true;
                      }
                  $msg[] = '</div>';                
              }

              if(empty($errors) && $msg['error'] === false) {
                $insert = mysqli_query($conn, "INSERT INTO zone (zone_name, uid, remark) VALUES('$zone_name', '$uid', '$remark') ");
                if($insert) {
                    $msg[] = 'New zone added.';                 
                } else {
                    $msg[] = "Can't add new zone.";
                    $msg['error'] = true;   
                }
              }
        }       
        echo json_encode($msg); 
    }   
}

Answer 1

Don't mix output with error state:

<?php
/**
*/
if(isset($_POST['form_name']) && $_POST['form_name'] == "zone") {
    if(verifyForm('zone', 'add')) {
        $msg = array();
        $msg['error'] = false;
        $msg['body']  = [];
        $zone_name = validate_data($_POST['zone_name']);
        $remark = validate_data($_POST['remark']);
        $errors = array();
        $check = mysqli_query($conn, "SELECT zone_name FROM zone WHERE uid ='$uid' AND zone_name = '$zone_name' ");
        $num_check = mysqli_num_rows($check);

        if(isset($zone_name, $remark)) {
            if(empty($zone_name)) {
                $msg['body'][] = 'Zone name required';
                $msg['error'] = true;
            } elseif($num_check > 0 ) {
                $msg['body'][] = 'Zone name already exists, choose another name';
                $msg['error'] = true;
            }

            if(!empty($errors)) {
                $msg['body'][] = '<div class="alert alert-danger">';
                $msg['body'][] = '<strong>OPPS! Correct the following error(s):</strong><br/>';
                foreach($errors as $er) {
                    $msg['body'][] = $er.'.<br/>';
                    $msg['error'] = true;
                }
                $msg['body'][] = '</div>';
            }

            if(empty($errors) && $msg['error'] === false) {
                $insert = mysqli_query($conn, "INSERT INTO zone (zone_name, uid, remark) VALUES('$zone_name', '$uid', '$remark') ");
                if($insert) {
                    $msg['body'][] = 'New zone added.';
                } else {
                    $msg['body'][] = "Can't add new zone.";
                    $msg['error'] = true;
                }
            }
        }
        $msg['body'] = implode('',$msg['body']);
        echo json_encode($msg);
    }
}
?>
<script type="text/javascript">
    $(document).ready(function() {
        $("#add_zone").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url : 'add',
                data : $(this).serialize(),
                dataType : 'json',
                type : 'POST',
                beforeSend : function () {
                $("#submit_button").val("Wait...");
            },
                success : function ( result ) {
                $("#submit_button").val("Add New Zone");
                if (result.error) {
                    $('#form_result').append('<p class="alert alert-danger">'+result.body+'</p>');
                }
                else {
                    $('#form_result') . html(result.body);
                }
            },
            });
        });
    });
</script>