Question

I am using a form tutorial that shows how to handle errors and return to the page via json. I can see in chrome that the json response is being sent but it is not being displayed in the result div. That is blank. In chrome in the element tab I can see that the information is being inserted just not displayed. If someone could show me why this is happening I would be grateful. Thanks

source showing as entered

<div id="brtv-result" style="display: none; " class="success error">You must enter a service level</div>

jquery

$.ajax({
      type: "POST",
      url: "boxrtrvtemp.php",
      cache: false,
      data: send,
      dataType: "json",
      success: function(msg) {
          $("#brtv-result").removeClass('error');
          $("#brtv-result").removeClass('success');
          $("#brtv-result").addClass(msg.status);
          $("#brtv-result").html(msg.message);
     },
      error:function(){
         $("#brtv-result").removeClass('success');
         $("#brtv-result").addClass('error');
         $("#brtv-result").html("There was an error submitting the form. Please try again.");
     }
   });

the php

<?php

//response array with status code and message
$response_array = array();

//validate the post form

//check the name field
if(empty($authorised)){

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'Name cannot be blank';

//check the email field
} elseif(empty($serivce)) {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must enter a service level';

//check the message field
} elseif($department=="Choose Department") {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must select a department';

//form validated. send email
} elseif($address=="Choose Address") {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must select a retrieveal address';

//form validated. send email
} elseif(empty($boxnumber)) {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must enter a box for retrieveal';

//form validated. send email
}else {

    //set the response
    $response_array['status'] = 'success';
    $response_array['message'] = 'All items retrieved successfully';

}

//send the response back
echo json_encode($response_array);

?>

Answer 1

That’s because you have to show the div i think because it starts out hidden:

$.ajax({
      type: "POST",
      url: "boxrtrvtemp.php",
      cache: false,
      data: send,
      dataType: "json",
      success: function(msg) {
          $("#brtv-result").removeClass('error');
          $("#brtv-result").removeClass('success');
          $("#brtv-result").addClass(msg.status);
          $("#brtv-result").html(msg.message);
          $("#brtv-result").show()//show it
     },
      error:function(){
         $("#brtv-result").removeClass('success');
         $("#brtv-result").addClass('error');
         $("#brtv-result").html("There was an error submitting the form. Please try again.");
          $("#brtv-result").show()//show it
     }
   });