Question

I had a hard time phrasing my question’s title. Basically here’s the problem:

I’ve got this interface consisting of 5 visual rows that only differ by input and by name.

Each row has 2 select boxes/lists in it, I want the second select list to be filled with one of 7 different arrays (who are made by querying the database) depending on the selection the user made in the first selection box(the first box only influences the ORDER BY part of the query).

How do I make this happen immediately after the user makes a selection in the selection box?
Meaning without the user pressing any other submit button. I want most of the code processing to be server side but the output to be visible on client side immediately. And it would be ugly if the whole page refreshes each time the user changes a selection box, as he needs to select something in all 5.

Do I need to combine my php with some javascript to achieve this? And if so what kind of code am I looking for?

Answer 1

If you are using jquery this could be quite simple…

/* pick up the first select box changing */
$(".select_box_class").change(function() {

  /* show some loading indicator */
  show_loading_indicator();

  /* fire off a ajax call to the server which could return the html for the next select box or the data to build up the html in the client */
  $.post('/path/to/server.php',{selection:$(this).val()}, function(newSelect) {
      /* here you can update/create you next select box */
      $("#select_box2_placeholder").html(newSelect);

      turn_off_loading();
  });

});