dynamically adding a select box with options populated by php to a form

I have a send message form, with a list of recipients populated by a PHP query to the database. I want to be able to include multiple recipients by dynamically adding select boxes to the form, depending on how many people they wish to send the message to.

I don't know javascript all that well and I have been researching the web to see how I can dynamically add a select box to a form with the options populated by PHP, but the only thing I seem to be able to find is how to populate the options depending on what was selected in the previous select box.

This is my Javascript:

<script type="text/javascript">
function add_recipient_field(){
    var container=document.getElementById('addanother');
    var to_field=document.createElement('select');
    to_field.name='to[]';
    to_field.type='file';
    container.appendChild(to_field);
    var br_field=document.createElement('br');
    container.appendChild(br_field);
}
</script>

This is my PHP :

$tosql = "SELECT UserID, Firs开发者_StackOverflow社区tName, LastName FROM users WHERE Active = 'yes' ORDER BY LastName ASC";
$query = mysqli_query($dbc, $tosql) or die("Error: ".mysqli_error($dbc));
$tobox .= "<option value=\"None\">None</option>\n";
while ($row = mysqli_fetch_array($query)) {
    if ($row['UserID'] == $to) {
        $tobox .= "<option value=\"$row[UserID]\" selected=\"selected\">$row[LastName], $row[FirstName]</option>";
    } else {
        $tobox .= "<option value=\"$row[UserID]\">$row[LastName], $row[FirstName]</option>";
    }
}

This is my HTML:

<div id="addanother"><li><label for="to">To: </label><select name="to[]" id="to">$tobox</select><a href="javascript:void(0);" onClick="add_recipient_field();">add more</a>$toerror</li></div>

When I click on the "add more" link, it adds another select box, however there are no options in the box so it appears empty. I know I'm missing something fairly simple, but if someone could help or point me in the direction of a tutorial I would very much appreciate it.

All add_recipient_field does is add an empty select. I know that's your quandary, but my point is that according to the function you have listed above, adding an empty select is what it SHOULD do since that's what it is written to do. You still have to fill the data somehow.

Keep in mind that PHP ONLY runs on the server and does not interact with the currently loaded page in the browser. You can use Javascript to call PHP on the server and use the returned data to modify the page in place, but PHP itself cannot change the document after it has been loaded.

You have 3 primary options.

1. You can reload the page every time the user selects "add more" and have php rebuild the page with the new select. Keep in mind that for proper usability, you'll have to pass all your form data every time and refill it as you rebuild the form.

2. You can build the selects entirely from Javascript, which means the Javasript on the page will need to have all the required data at hand. PHP's json_encode method can be very helpful for doing this quickly. You load all your data into a javascript object at the top of the page and then every time you add a new select, you fill that new select from that data.

3. You can read up on what's generally referred to as "AJAX" where the javascript on the page interacts with PHP on the server in order to dynamically load your data upon request and change the already loaded page without a refresh. This is something of a mix of the two prior options and is probably the more advanced method, but the most rewarding to learn.