search function using two textfield data in jquery ajax

Question

I want to search and retrieve data from MySQL table. I used two text fields to get search key words. I used jquery ajax for this. First time I used only location for search. Then it works. When I used both text fields it not worked. Then I got always no data.

    <div class="container">
<form action="search.php" method="post">
    <input type="text" id="location" name="location">&nbsp;
    <input type="text" id="catogary" name="catogary">
    <script>
        $('#location,#catogary').keyup(function () {
            var loca=$(this).val();
            var cato=$(this).val();
            if(loca!='' || cato!=''){
                $.ajax({
                    url:"search.php",
                    method:"POST",
                    data:{searc:loca,cato:cato},
                    DataType:"text",
                    success:function (data) {
                        $('#result').html(data);
                    }
                });
            }
            else{
                $('#result').html('');
            }

        });
    </script>
</form>
<div id="result"></div>
</div>

php code

    <?php

    $conn=mysqli_connect("localhost","root","","internship");
    $output='';
    $sql="select * from vacancy where location like '%".$_POST["searc"]."%' 
    and catogary like '%".$_POST["cato"]."%'";
    $res=mysqli_query($conn,$sql);
    if(mysqli_num_rows($res)>0){

    while($row=mysqli_fetch_assoc($res)){
    ?>
        <div class="bs-calltoaction bs-calltoaction-primary">
                    <div class="row">
                        <div class="col-md-9 cta-contents">
                            <h1 class="cta-title">Its a Call To Action</h1>
                            <div class="cta-desc">
     <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['company_name'];?>' readonly style="width:    75%"><br><br>
     <input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">&nbsp;
     <input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%">
                 </div>

                        </div>
                        <div class="col-md-3 cta-button">
                            <a class="btn btn-primary btn-large" 
                    href="#myModal" data-toggle="modal">Apply for job</a>
                        </div>
                    </div>
                </div>
             <?php
        }



          }
           else{
            echo 'no data';
             }

            ?>

Answer 1

Use var loca = $('#location').val(); var cato = $('#catogary').val();

to get input values

Use this query

    $sql="select * from vacancy";
    $where = "";

    if(!empty($_POST["searc"]){
         if($where == "") {
           $where = $where." where location like '%".$_POST["searc"]."%'";
         } else {
          $where = $where." AND location like '%".$_POST["searc"]."%'";
         }
    }
    if(!empty($_POST["cato"]){
         if($where == "") {
             $where = $where." where catogary like '%".$_POST["cato"]."%'";
         } else {
             $where = $where." AND catogary like '%".$_POST["cato"]."%'";
        }
     }

     $sql = $sql.$where;

Answer 2

Change the below 2 lines,

var loca=$(this).val();
var cato=$(this).val();

by,

var loca=$('#location').val();
var cato=$('#catogary').val();

Also use dataType not DataType in $.ajax(),

$.ajax({
   url:"search.php",
   method:"POST",
   data:{searc:loca,cato:cato},
   dataType:"text", // use dataType not DataType
   success:function (data) {
       $('#result').html(data);
   }
});