CODEWITHSUNDEEP
javascripthtmldjango
Jay42
Jay42

Reputation: 427

how to add populated select field to form on button click

I have form where a user can select an option and then submit, i want to add a button that will add another select option to the form. so that the user can submit two or more options

<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<select>
{%for each in mechanic_list %}

  <option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>

  {%endfor%}
  </select>
  <input type="submit" value="Submit">
</form>

<script>    
    function add_field() 
    {
    var form = document.getElementsByTagName('form')[0],
    input = document.createElement('select');

    input.setAttribute('type', 'select');
    input.setAttribute('name', 'pet');
    form.appendChild(input);
    };
    </script>

the above code will populate a first select box and has a button that adds empty select fields (after the submit, for some reason)

two questions 1. how do i populate the added select field 2. how do i move the new field to the proper side of the submit button.

one thing to note, i am using the Django web Framework and have used a for loop to populate the select values.

this is a JSfiddle http://jsfiddle.net/5Jr8N/59/ (no for loop)

thanks

Edit/update HTML script as coded

<script>    
        function add_field() {
            var container = document.getElementById('selects'),
                input = document.createElement('select');
            var opt = document.createElement("option");
            {% for each in mechanic_list %}
            opt.value = "{{each.id}}";
            opt.innerHTML = "{{each.DESCRIPTION}}";
            {%endfor%}
            input.appendChild(opt);
            input.setAttribute('type', 'select');
            input.setAttribute('name', 'pet');
            container.appendChild(input);
          };
    </script>

html script as "rendered" (given to browser/from browser "view source")

<script>    
        function add_field() {
            var container = document.getElementById('selects'),
                input = document.createElement('select');
            var opt = document.createElement("option");

            opt.value = "dd";
            opt.innerHTML = "dd";

            opt.value = "TT";
            opt.innerHTML = "Test for";

            input.appendChild(opt);
            input.setAttribute('type', 'select');
            input.setAttribute('name', 'pet');
            container.appendChild(input);
          };
    </script>

so this is working except that it only displays the last value not both/all values. this is so close i can taste it.

how do i get both/all the values not just the last one?

Upvotes: 0

Views: 2020

Answers (1)

catavaran
catavaran

Reputation: 45575

What do you mean by "populate the added select"?

To change position of new select field wrap existing <select> into <span> and append new selects to this <span>. To populate options from original <select> just copy innerHTML from it:

<form action="#" method="get">
  <button type="button" onclick="add_field()">Add another field</button>
  <span id="selects">
    <select id="orig_select">
    {% for each in mechanic_list %}
      <option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
    {%endfor%}
    </select>
  </span>
  <input type="submit" value="Submit">
</form>

<script>    
    function add_field() {
      var container = document.getElementById('selects'),
          input = document.createElement('select');

      input.innerHTML = document.getElementById('orig_select').innerHTML;

      input.setAttribute('type', 'select');
      input.setAttribute('name', 'pet');
      container.appendChild(input);
    };
</script>

Upvotes: 2

Related Questions