Adding a select box using Javascript; to a html form that is populated by PHP

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

If the values in the additional select boxes aren't dependent on other selections the user makes, you could just insert them using PHP at the same time as you generate the rest of the page, and hide them using CSS. Then all you'd need to do in javascript is toggle whether they're displayed. — octern
– octern, Commented Apr 21, 2012 at 23:12

Pavel Strakhov · Accepted Answer · 2012-04-22 00:10:15Z

2

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"]);

edited Apr 22, 2012 at 0:10

answered Apr 21, 2012 at 23:36

Pavel Strakhov

40.8k6 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MattHeywood Over a year ago

Trying to implement this, this is what i have so far? any errors as its just adding a line

Pavel Strakhov Over a year ago

You should set value attributes of each option. Also, replace split with explode (I always confuse with these functions).

MattHeywood Over a year ago

I understand you. I don't want to repeat the value though, i want to repeat the select form so that the user can choose how many select options they want - thankyou for your time

g13n · Accepted Answer · 2012-04-21 23:16:23Z

0

You can use Ajax to pull the data from server into the client and create the SELECT from JavaScript.

In JavaScript there are multiple ways to construct the SELECT:

Use DOM methods like document.createElement which is slower compared to the other choice
Construct the SELECT and the OPTIONS as a string and then inject into the parent container using innerHTML. This is faster in performance than the DOM way.

HTH.

answered Apr 21, 2012 at 23:16

g13n

3,2662 gold badges27 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

To duplicate an option:

var opt_val = $("select[name=ingredient_select] :selected").val();

$("select[name=ingredient_select]").append( "<option value='" + opt_val + "' selected='selected'>Ingredient</option>")

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 21, 2012 at 23:26

the_red_baron

8887 silver badges14 bronze badges

Collectives™ on Stack Overflow

Adding a select box using Javascript; to a html form that is populated by PHP

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related