使用MySQL条目填充下拉列表

Question

I have a MySQL database that contains, amongst other things, 2 tables. One is the events table, containing event names and other details. The other is the instance table. This table links the events table to a venue table and adds a date, so each row is an instance of the linked event.

I am making an event booking form for internal use for these events. I want to allow selection of the event to be booked via a dropdown list. So, I have populated one dropdown with the event names:

$qEvent = "SELECT event_name, event_id FROM events";
$rEvent = mysqli_query($dbc,$qEvent);

echo '<select>';
while ($row = mysqli_fetch_assoc($rEvent)) {
        echo '<option value="'.$row['event_id'].'">'.$row['event_name'].'</option>';
}
echo '</select>';

What I now want to do is, for the selected event, grab all the instances associated with that event, and populate another dropdown with the dates.

Can I do this with PHP, or do I need to dip into Javascript? I think I just need some way to grab the event_id value of the dropdown selection and then query based on that, but I don't know how without Javascript.

Answer 1

You should be looking at Javascript or jQuery for achieving your goal. I've used jQuery based on my question to you earlier. It's also simpler and less code.

Your PHP:

Add an ID attribute event_menu to your select menu

echo '<select id="event_menu">';
while ($row = mysqli_fetch_assoc($rEvent)) {
        echo '<option value="'.$row['event_id'].'">'.$row['event_name'].'</option>';
}
echo '</select>';

<div id="container_for_new_menu"></div>

Using jQuery:

$('#event_menu').on('change', function() {
    // get selected value and build data string for AJAX
    var event_selected = "event_selected="+$(this).val();

    // send the selected data to a PHP page to build the populated menu
    $.ajax({
        url : 'populate-menu.php',
        type: 'POST',
        data : event_selected,
        dataType : 'html',
        success : function(data) {
            $('#container_for_new_menu').html(data);
        }, error : function() {
            alert("Something went wrong!");
        }
    });
});

On populate-menu.php , have something like:

$event_selected = isset($_POST['event_selected']) ? $_POST['event_selected'] : null;

// do SQL query here based on user's selection
// making sure you validate the data in the POST request for malicious BS
// or use parameterized queries

// then build a new menu to send back
echo '<select>';
    // loop through results and build options
echo '</select>';

This new menu will then be posted back to your original page into the container_for_new_menu element.

Answer 2

By the looks of it, you want to populate the "instances" dropdown based on the selection the user makes on the "event" dropdown. You cannot do this without Javascript.

My suggested way of doing this is to use AJAX to pull the instance data and populate the "instances" dropdown on change of the "event" dropdown. Useful resources below for simple AJAX get with jQuery:

http://api.jquery.com/jQuery.get/

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Answer 3

You need some kind of Javascript to accomplish this. Either: Basic- submit the form on select and let php populate the instance drop-down. More elegant- use Javascript to make an Ajax call on select which will dynamically replace the instance drop-down's div.

Answer 4

You will need JavaScript to populate the second drop down box. I suggest you load all the values into JSON on the page and then you can just use a jQuery on change event to populate the second select box.