Trying to add a select tag feature along with Jquery PHP search code

Here is the code I am using for a search function, it fetches the data from fetch_data.php and it works. But I would like to add an additional filter option to the search page. For example Country or City. I tried many methods, but none worked.

   <script>
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '')
    {  
      
      $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{page:page, query:query},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      load_data(page, query);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });

  }); 
 </script>

this fetches data from fetch_data.html as $_POST['query'] I would also like to filter data based on input from a HTML Tag. I am able to make the fetch_data.html side working, by manually adding the choose city. But how can I use the HTML Tag and ajax code to choose city for/from each search.

I just want to get the input from HTML Tag data as $_POST['city'] on the fetch_data.html page.

I tried the following and it didn’t work. to tets I used a second search field, but $_POST['city'] was still showing same result as $_POST['query'].

   <script>
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '', city = '')
    {  
      
      $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{page:page, query:query, city:city},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      var city = $('#city_box').val();
      load_data(page, query, city);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });
    $('#city_box').keyup(function(){
      var city = $('#city_box').val();
      load_data(1, city);
    });

  });
</script>

Example select tag

<select name="city_box" id="city_box">
  <option value="newyork">New York</option>
  <option value="london">London</option>
  <option value="tokyo">Tokyo</option>
  <option value="paris">Paris</option>
</select>

Answer

A few things here:

1. If you’re requesting data from the server, you should really be using a GET request, not a POST. You can add the query, city etc in the query string of the request.
2. You are missing a parameter when calling load_data from the city_box function. Since both query and city are optional, it will assume the ‘city’ you were passing it was actually the query and leaving city as an empty string. Manually adding an empty string for the query param should fix this e.g.

$('#city_box').keyup(function(){
  var city = $('#city_box').val();
  load_data(1, '', city);
});

3. It’s probably worth getting the current city and query in both of the keyup functions so that whichever you didn’t just change doesn’t get reset for that query. This will also get round the issue pointed out in #2 above .e.g.

$('#search_box').keyup(function () {
    var query = $('#search_box').val();
    var city = $('#city_box').val();
    load_data(1, query, city);
});
$('#city_box').keyup(function () {
    var query = $('#search_box').val();
    var city = $('#city_box').val();
    load_data(1, query, city);
});