Jquery- Problems in passing variable to PHP using Ajax

Question

I have two input text boxes along with two unordered lists in which in first input box user selects a value from first list and based on that value second unordered list shows its options. Same as Select and Option Tags of HTML. In my webpage Select box has been replaced with Input text box and Option values with unordered lists. Both lists are fetched from Mysql database.

Table1:

Id(int)     catid(int)  cat(varchar)
1       161     Hotel
2       162     Hotel
3       163     Banquet
4       164     Farms
5       165     Farms
6       166     Resort

Table2.

Id(int)     name(varchar)  area(varchar)
161     Abc     Mall Road
162     Bcd     Fountain Chowk
163     Def     Chandni Chowk
164     Efg     Chrol Bagh
165     Fgh     Mall Road
166     Ghi     Mall Road

Now first unordered list shows Distinct cat from Table1 and Based on that second list shows area from Table2. If user selects Hotel from first list than based on catid(161,162) of Table1, Mall Road and Fountain Chowk are second list elements. Similarly for Banquet Chandni Chowk, for Farms Chrol Bagh and Mall Road and so on.

PHP:

<div class="frmSearch">
    <input type="text" class="search-box" placeholder="Select Category" />
    <div class="sbox"></div>
</div>
<div class="frmSearch1">
    <input type="text" class="search-box1" placeholder="Select Category First" />
    <div class="sbox1"></div>
</div>

Jquery

<script>
    $(document).ready(function() {
        $(".search-box").keyup(function() {
            $.ajax({
                type: "POST",
                url: "readCountry1.php",
                data: { cat: $(this).val() },
                beforeSend: function(){
                    $(".search-box").css("background","#FFF");
                },
                success: function(data) {
                    $(".sbox").show();
                    $(".sbox").html(data);
                    $(".search-box").css("background","#FFF");
                }
            });
        });
    });

    function selectCountry(val) {
        $(".search-box").val(val);
        $(".sbox").hide();
    }
</script>

readCountry1

<ul class="country-list">
    <?php
     require_once("db.php");
        if(!empty($_POST["cat"])) {
            $query ="SELECT cat FROM Table1 WHERE cat like '%$_POST[cat]%' ";
            $result = mysqli_query($mysqli, $query);
            if(!empty($result)) {
                while($row=mysqli_fetch_array($result))
                {
    ?>
                    <li onClick="selectCountry('<?php echo $row["cat"]; ?>');"><?php echo $row["cat"]; ?></li>
    <?php 
                }
            }
        }
    ?>
</ul>

First box is working perfectly for me. But I don’t know how I can fetch values in second list. Now what I want is

1. To change placeholder on selection in first box e.g. If no value is selected in first box then as it is and when a cat is selected in first box then change placeholder of second box to Choose area.

2. To create a list of areas of corresponding catid’s.

Thanks in advance.

Answer 1

Answer to your first question

Add some conditional logic in your selectCountry function, If there is value in firstbox then change placeholder of second one like this:

function selectCountry(val) {
    if(val!='' || val!=undefined){
        $('.search-box1').attr('placeholder','Choose Area');
    }else{
       $('.search-box1').attr('placeholder','Select Category Frist');
    }
    $(".search-box").val(val);
    $(".sbox").hide();
}

Answer to your second options

Now if you want to find area accordingly to the selection then you have to send ajax request like you send for finding country list. In your selectCountry function write some code for ajax:

 function selectCountry(val) {
    if(val!='' || val!=undefined){
        $('.search-box1').attr('placeholder','Choose Area');
        $.ajax({
            type: "POST",
            url: "area.php",
            data: { cat: val },
            success: function(data){
                ///////show your result require portion/////////
            }
        });
    }else{
       $('.search-box1').attr('placeholder','Select Category Frist');
    }
    $(".search-box").val(val);
    $(".sbox").hide();
}

In Area.php page write your query

 <?php
     $li = '';
     require_once("db.php");
        if(!empty($_POST["cat"])) {
           $li = '<ul class="area-list">';
            $query ="SELECT cat FROM Table2 WHERE id = '$_POST[cat]' ";
            $result = mysqli_query($mysqli, $query);
            if(!empty($result)) {
                while($row=mysqli_fetch_array($result))
                {
                    $li .= '<li>'.$row["area"].'</li>';
                }
            }
           $li .= '</ul>';
        }
echo $li;
    ?>