dynamically adding a select box with options populated by php to a form
<p>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.  </p>

<p>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. </p>

<p>This is my Javascript:</p>



<pre><code>&lt;script type="text/javascript"&gt;
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);
}
&lt;/script&gt;
</code></pre>

<p>This is my PHP :</p>



<pre><code>$tosql = "SELECT UserID, FirstName, LastName FROM users WHERE Active = 'yes' ORDER BY LastName ASC";
$query = mysqli_query($dbc, $tosql) or die("Error: ".mysqli_error($dbc));
$tobox .= "&lt;option value=\"None\"&gt;None&lt;/option&gt;\n";
while ($row = mysqli_fetch_array($query)) {
    if ($row['UserID'] == $to) {
        $tobox .= "&lt;option value=\"$row[UserID]\" selected=\"selected\"&gt;$row[LastName], $row[FirstName]&lt;/option&gt;";
    } else {
        $tobox .= "&lt;option value=\"$row[UserID]\"&gt;$row[LastName], $row[FirstName]&lt;/option&gt;";
    }
}
</code></pre>

<p>This is my HTML:</p>



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

<p>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. </p>
