Post form input to PHP using AJAX for multiple autocomplete query conditions

Question

I'm using jquery autocomplete on an input form 'city' but i would like the query in my 'autocity.php' file to only suggest cities in the pre selected country i.e. WHERE City LIKE '%$term%'" AND CountryID = '%$country%'. The form action submit uses a separate PHP file (create-business.php) for inserting the form data to the database so the usual $_POST['Countries_CountryId'] wouldn't work in the autocity.php. that's why i'm now using AJAX to post 'country' to autocity.php. Also it would be great to have a way to echo/alert/print_r from the the autocity.php file so i can confirm that the $_POST['$country'] from the ajax post reaches the autocity.php file.

I have two input boxes in the form

<pre>`
<form id="input" action="php/create-business.php" method="post">
<select name="Countries_CountryId" id="country">
<input type="text" id="city" name="City">`
</pre>

Here is the script from the form

<script>
$(function () {
var country = $("#country").val();
$.ajax({
type:"POST", url:"autocomplete/autocity.php", data:"country",         
beforeSend:function () {
// alert(country);
}, complete:function () {  // is there any need for this?
}, success:function (html) {  // is there any need for this too?
}
});

$("#city").autocomplete(
             {
             source:'autocomplete/autocity.php'
             })
    });
</script>

And here is autocity.php

`
//database connection works fine and autocomplete 
//suggestion works without the AND CountryID = '%$country%' part.  

    $country = "";
    if (isset($_POST['country'])) {
    $country = trim($_POST['country']);}
    echo "window.alert($country);"; //This did nothing no alert

    $term = $_REQUEST['term'];
    $req = "SELECT City
            FROM cities
            WHERE City LIKE '%$term%' AND CountryID = '%$country%'";

    $query = mysql_query($req);
    while ($row = mysql_fetch_array($query)) {
        $results[] = array('label' => $row['City']);
    }
    echo json_encode($results);
    ?>`

So the question is basically:

1 - how can i use a text input from a form using AJAX in a .php file that queries a MySQL db that is not the submit form action .php file

2 - how can i alert the post variable from the PHP file when ajax is used to show that the php file recieves my ajax post. In my brief experience echo and print_r only work on form submit when the web page changes showing the result of my form submit ont the form action.

3- how is my syntax?

Thank you very much in advance for helping this novice out :D

Ok here is my update on things i've tried. I think i'm close. i'm using Jquery UI - //ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js

here is the script method 1:

   $(document).ready(function () {
    var country = $('#country').value();
    alert(country + " complete");
    $("#city").autocomplete(
          {
            source:'autocomplete/autocity.php?country='+country,
            minLength:1
           });
        });

here is the script method 2:

 $(document).ready(function () {

    $('#city').autocomplete({
        // source: function() { return "GetState.php?country=" + $('#Country').val();},
        source:function (request, response) {
            $.ajax({
                url:"autocomplete/autocity.php",
                //dataType:"json",
                data:{
                    term:request.term,
                    country:$('#country').val()
                },
                success:function (data) {
                    response(data);
                }
            });
        },
        minLength:2
    });
  });

I like method 2 more since it will allow me to add more than one parameter.

Finally here is my latest autocity.php code

 <?php
    $term = $_REQUEST['term'];
    $country = $_REQUEST['country'];
    $req = "SELECT City
    FROM cities
    WHERE City LIKE '%$term%' AND CountryID = '%$country%' ";

    $query = mysql_query($req);

    while ($row = mysql_fetch_array($query)) {
    $results[] = array('label' => $row['City']);
    }

    echo json_encode($results);
     ?>

I'm still totally stuck though. can anybody see the problem with the code? Ive looked everywhere online for the right syntax. Thanks again

argentage argentage · Accepted Answer · 2013-02-14T23:46:54

For the first problem, your approach is essentially correct. You can bind to the blur event for a particular field and use your function to get that field's value and submit to the php script much in the manner that you are doing so. $.blur() is what you're looking for.

For the second problem the error_log function will write stuff to php's error log. IF you use print_r to dump variables to this log, make sure to set print_r's second argument to true to output the result as the return value.

Post form input to PHP using AJAX for multiple autocomplete query conditions

1 Answers