Question

Bit of a badly written question, but basically I have a Form for users adding their values to the database. One of the fields needs a drop down box that is populated with the values in my database field. However the user may want to have more than one select box (all the drop down selections need to post to the same database field).

<form method="POST" action="addcocktail.php" >
                    <tr><td>Cocktail Name: </td><td><input type="text" name="cocktailname" /> </td></tr>
                    <tr><td>Ingredients: </td><td><input type="text" name="ingredients" /> </td></tr>
                    <select name="ingredientselect"> 
                    <option value="" selected="selected">Ingredient</option>
                    <option value="" selected="selected">Ingredient</option>
                    </select>
                    <input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">
                    <tr><td>How To: </td><td><input type="text" name="howto" /> </td></tr>
                <input type="submit" value="add" />
                </form>

I need a Javascript function that will basically duplicate one of my select options, so the user can choose how many “ingredients” they want; on button click. (I’ve been playing around with the addElement but to no avail)

And Im also wondering how to pull the database values straight into the select box options.

Any help is apppreciated, thanks -Matt

Answer 1

Your HTML code has a mistake: there are tr and td tags but there is no table tag. Here is example of how you can get what you want:

<script type="text/javascript">

function addTextboxes() {
  var cont = document.getElementById("selects_container");
  cont.innerHTML += document.getElementById("first_select").innerHTML;
}
</script>
...
<div id="selects_container">
  <div id="first_select">
    <select name="ingredientselect[]"> 
      <option value="" selected="selected">Ingredient</option>
      <option value="" selected="selected">Ingredient</option>
    </select>
  </div>
</div>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">

This way isn’t perfect and have a perfomance problem, but it’s simple.

You should add [] to name of select, then you can retrieve values of all selects in PHP.

Also, I can advise you not to multiply selects or options, but add selected values to page as text. Selected values can be stored in hidden input tag and passed to server:

<script type="text/javascript">
function addTextboxes() {
  var new_value = document.getElementById("the_select").value;
  document.getElementById("selected_values").value += new_value + ",";
  document.getElementById("selected_text").innerHTML += new_value + "<br>";
}
</script>
...
<input id="selected_values" name="selected_values" type="hidden">
<div id="selected_text"></div>
<select name="ingredientselect[]" id="the_select"> 
  <option value="" selected="selected">Ingredient</option>
  <option value="" selected="selected">Ingredient</option>
</select>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">

On server side:

$selected_values_array = explode(",", $_POST["selected_values"]);