Ajax cannot load data from php to div

Question

This is the ajax function

$(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'searchphp.php',
                data: {suburb_id: $('#suburb_id').val()},
                success: function(data)
                {
                    $("#tableContent").html(data);
                }
            });
        });
    });   

this is the php file need to receive data, it worked perfect.

<?php
//Check the form if submit by post
    if (isset($_POST["searchBtn"])) {
        $strInputSuburb = "";


        $strInputSuburb = $_POST["suburb_id"];


        //Check if the input box is empty or not
        //if BOTH "Suburb" AND "Street" is empty, it will display the error message.
        if(!empty($strInputSuburb))
        {
            //Connect to database server and table
            include("connection.php");
            @mysqli_select_db($conn, "db")
            or die ("Database not available");

            $querySql1 = "select * from Infringement 
                          where suburb like '%".mysqli_real_escape_string($conn, $strInputSuburb)."%' and Street1 like '%".mysqli_real_escape_string($conn, $strInputStreet)."%'
                          order by Suburb, Fines DESC";

            $result1 = mysqli_query($conn, $querySql1)
                or die ("No information return...");

            $count = mysqli_num_rows($result1);
            $i=1;
            if(!$count==0){
                //do stuff, like echo
            }
            else {
                //do stuff
            } 

            //Release the SQL clause
            mysqli_free_result($result1);
            //Close the connection to database
            mysqli_close($conn);
        }
        else {
        //do stuff
        }
    }   
?>         

i want load to this div

<div id="tableContent"></div>

the css style is

#tableContent {

            width:100%;
            height:400px;



        }

The input box is below

<input type="textbox" class="form-control" name="suburb" placeholder="Suburb" id="suburb_id" >
<input type="submit"class="btn" name="searchBtn" id='submit' value="Search" />

I used php to get data from form before. after using Ajax, I deleted "form" tag.

Thank you so much.

Answer 1

You're not sending the searchBtn parameter, which the PHP script is checking for. Add it to the data: option.

$(document).ready(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'searchphp.php',
            data: {
                suburb_id: $('#suburb_id').val(),
                searchBtn: 'Search'
            },
            success: function(data)
            {
                $("#tableContent").html(data);
            }
        });
    });
});

Or remove that check from the PHP script, and test if (isset($_POST['suburb_id'])) instead.