Question

I have a simple user table which displays user info such as their current Country and Province.

<td><b>Country</b></td>
        <td width="331">
        <form method="post" action="">
        <div id="countryList" style="vertical-align:top; display:inline-block; float:left;"><?=$country?></div>
        <input type="submit" name="submitCountry" id="submitCountry" class="ui-icon ui-icon-disk" style="border:none; display:none; background-color:transparent; float:right; vertical-align:top;" />  
        </td>
        <td width="336">&nbsp;</td>
      </tr>
      <tr>
        <td><b>Province</b></td>
        <td>
        <div id="provinceList" style="vertical-align:top; display:inline-block; float:left;"><?=$province?></div>
        </form>
      </td>

When the user clicks on their Country, the DIV converts to an input box with autocomplete and initiates an AJAX request to the database. this allows the user to type in a country and it will show up in the list.

jQuery code:

$("#countryList").click(function(){

            $("#submitCountry").css("display", "inline");

            //check if there are any existing input elements
            if ($(this).children("input").length == 0){


                //variable that contains input HTML to replace
                var inputbox = "<input type='text' id='countryList' class='inputbox' name='country' value=\""+$(this).text()+"\">";    
                //insert the HTML intp the div
                $(this).html(inputbox);         

                //automatically give focus to the input box     
                $(".inputbox").focus();

                //maintain the input when it changes back to a div
                $(".inputbox").blur(function(){
                    $("#submitCountry").css("display", "none");

                    var value = $(this).val();
                    $("#country").val(value);
                    $("#countryList").text(value);

                });
            }  


            //Once input box is displayed assign it the autocomplete method
            $("input#countryList").autocomplete ({
                //set a few options, and select source data
                minLength : 2,
                source : function (request, callback)
                {
                    //variable that will carry the request 'term' from url
                    var data = { term : request.term };

                    //ajax method to call pho script
                    $.ajax ({
                        url : "getCountry.php",
                        data : data,
                        complete : function (xhr, result)
                        {
                            //if returns empty, then exit out
                            if (result != "success") return;

                            //otherwise get response and fill country array
                            var response = xhr.responseText;
                            var country = [];
                            //filter each li item
                            $(response).filter ("li").each (function ()
                            {
                            //display li item inline
                            country.push ($(this).text ());
                            });
                            //display country list
                            callback (country);
                        }

                    });
                }

            });   
if ($("#provinceList").children("input").length == 0){

                var selectbox = "<select id='selectProv' name='selectProv'></select> ";

                $("#provinceList").html(selectbox);

                var datastring = { term : request.term };
                $.ajax({
                    url: "getProvince.php",
                    data: datastring, 
                    success: function(html){
                        $(".selectProv").html(html);
                    }
                })
            }

The getCountry.php file is as follows. Yes i know, i need to protect myself from SQL injections. at the moment i have not gotten that far in my course (i am a student).

Here is getCountry.php

 <?php

$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));

//send query string to DB
$result = mysql_query($query);

//if result returns a value
if ($result != NULL){

    // Use the result (sent to the browser)
    while ($row = mysql_fetch_assoc($result)){

        echo ("<li>" . utf8_encode ($row["Name"]) . " (" . utf8_encode ($row["Code"]) . ")</li>");

    }

    mysql_free_result($result);
}

mysql_close ($bd);

?>

getProvince.php
This code will be used to query the database and generate a a drop down menu. I know this code works because i can navigate to it, and pass it a string, and it will generate the dropdown that i need. the issue is that it doesnt work within the overall application.

    <?php

$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));

//send query string to DB
$result = mysql_query($query);

//if result returns a value
if ($result != NULL){

    $row = mysql_fetch_assoc($result);
    $code = $row['Code'];

    $sql = "SELECT DISTINCT District FROM City WHERE CountryCode='$code'";

    $result = mysql_query($sql);

    ?>
    <option>Select State/Province</option>
    <?php while($row=mysql_fetch_array($result)){

        echo "<option value=" . $row['District'] . ">" . $row['District'] . "</option>";
    }

    mysql_free_result($result);
}

mysql_close ($bd);

the above code works to an extent. I am able to get the country text box to properly query the DB and perform the autocomplete method, however the results do not populate the dropdown with provinces like i would want them too! thanks in advance

Answer 1

Your query is not being sanitized !!!!!!!!!!!!!!!!!, neither is being concatenated properly, you can do it more simply:

$query = "SELECT * FROM Country WHERE Name LIKE '%" . mysql_real_escape_string($term) . "%'";

Please ALWAYS sanitize your inputs, it’s even more important than having a working script since you are risking your database integrity

Also this line should be sanitized, it doesn’t matter the value concatenated came from database

$sql = "SELECT DISTINCT District FROM City WHERE CountryCode='" . mysql_real_escape_string($code) . "'";

The following line should be:

$.ajax({
                url: "getProvince.php",
                data: datastring, 
                success: function(html){
                    $("#selectProv").html(html);
                }
            });

Note .selectProv changed to #selectProv (# means ‘id’, . means ‘class’)