How to clear textboxes and send alert message using Ajax if the data can't be found in MySQL table?

Question

I am trying to clear the textboxes and send an alert message when the data can't be found inside the MySQL table. Is there a way to do this even I use the type: 'json'? Because when I tried to remove json, the alert message is working, problem is if I do this it doesn't show the data inside MySQL table. Thank you in advance for the help.

 $(function() { $('#search').click(function() { var inp = $('#username'); if (inp.val().length > 0) { var src_uname = $('#username').val(); $.ajax({ url: "./search_process.php", type: "POST", dataType: "json", data: { username: src_uname }, success: function(data) { var fullname = data[0]['fullname']; var address = data[0]['address']; document.getElementById('fullname').value = fullname; document.getElementById('address').value = address; } }); } else { alert("Enter username in the textbox!"); } }); }); 

 <form id="form_data" style="width:40%;margin:1em auto;"> <div class="form-group"> <input type="text" id="username" name="username" class="form-control" placeholder="Enter Username" /> <input type="button" id="search" class="btn btn-success" value="Search" /> </div> <div class="form-group"> <input type="text" id="fullname" name="fullname" class="form-control" placeholder="Fullname" /> <input type="text" id="address" name="address" class="form-control" placeholder="Address" /> </div> </form> 

<?php
$cn = mysqli_connect("localhost","root","","testdb");

$username = $_POST['username'];
$query = "SELECT * FROM tblajax WHERE username = '$username' ";
$result = mysqli_query($cn,$query);
$numrows = mysqli_num_rows($result);

$info_arr = array();

if ($numrows > 0 ) {
    while ($rows = mysqli_fetch_assoc($result)) {
        $fullname = $rows['fullname'];
        $address = $rows['address'];

        $info_arr[] = array("fullname" => $fullname, "address" => $address);
    }

}
else {
    echo "<script>alert('Unable to find the information');</script>";
}
    echo json_encode($info_arr);
    exit;
?>

I want to send this alert message if the data can't be found:

echo "<script>alert('Unable to find the information');</script>";

And also I want to clear these two textboxes if the data can't be found:

<input type = "text" id = "fullname" name = "fullname" class = "form-control" placeholder = "Fullname" />
<input type = "text" id = "address" name = "address" class = "form-control" placeholder = "Address" />

Answer 1

One way to do this is to return a "success" status in your JSON. Then you can check that on the client side and alert a message as required. So you could change your code like this:

PHP

if ($numrows > 0 ) {
    $info_arr['data'] = array();
    while ($rows = mysqli_fetch_assoc($result)) {
        $fullname = $rows['fullname'];
        $address = $rows['address'];

        $info_arr['data'][] = array("fullname" => $fullname, "address" => $address);
    }
    $info_arr['success'] = true;
}
else {
    $info_arr = array('success' => false);
}
echo json_encode($info_arr);
exit;

jQuery:

success: function(data) {

  if (data.success) {
      var fullname = data.data[0]['fullname'];
      var address = data.data[0]['address'];
      document.getElementById('fullname').value = fullname;
      document.getElementById('address').value = address;
  }
  else {
      document.getElementById('fullname').value = '';
      document.getElementById('address').value = '';
      alert('Unable to find the information');
  }
}

Answer 2

You should send another HTTP status on fail, eg 404

if ($numrows > 0 ) {
    while ($rows = mysqli_fetch_assoc($result)) {
        $fullname = $rows['fullname'];
        $address = $rows['address'];

        $info_arr[] = array("fullname" => $fullname, "address" => $address);
    }

}
else {
    header("HTTP/1.0 404 Not Found");
}

and use below in JS, similar to the success event

success: function(data) {
          //var len = data.length;

          //if(len > 0){

          var fullname = data[0]['fullname'];
          var address = data[0]['address'];

          document.getElementById('fullname').value = fullname;
          document.getElementById('address').value = address;

          //}

        },
error: function() {
   document.getElementById('fullname').value = '';
   document.getElementById('address').value = '';

   alert ('Unable to find the information');
}

or check in success: function() whether data[0]['fullname'];` exists

if (data[0]['fullname']) {
//do fill fields
} else {
 document.getElementById('fullname').value = '';
 document.getElementById('address').value = '';

 alert ('Unable to find the information');
}