[FIXED] How can i dynamically add an Input select element on click of a button in ember

Issue

Am creating an ember application where am in need of dynamicaly adding a select element which will have options fetched from a server. so the select elements look like this. And instead of having all dropdown boxes predefined i need to add them dynamicaly like on a click of a button like( + add more). like

and each of those drop down boxes should contain the datas that is fetched from the server. plus i need a way to get the datas from those dynamically created select fields.

my .hbs for the current drop down page is..

map.hbs

<center><h4>Map</h4></center>
<container class = "cond">
{{#each this.model.sf as |row|}}
    <select class = "sel">
        {{#each this.model.sf as |sf|}}
        <option value = {{sf.attrname}}>{{sf.attrname}}</option>
        {{/each}}
        
    </select><br>
{{/each}}

I tried ember-dynamic-fields but its depracted and I couldnt able to use it.. and all other solutions on web or for ember way older versions.. nothing works on ember 4.6 so could anyone helpout?

Solution

I guess Simple js code did the magic of adding and retriving data.. pity of me after finding out.. And for some dynamic ember formdata the previous answer from nullvox helped out.. so here is the code

.hbs

<table class="table">
    <th>
    <td>Sf</td>
    </th>
    <th>
    <td>Db</td>
    </th>

    <tbody id = "map">

   </tbody>


   </table>
   <button class = "btn btn-sm btn-primary" type="button" {{action "submit"}}>Submit</button>
   <button class = "btn btn-success btn-sm" onclick = {{action "get"}} type="button">Add another</button>

controller code for creating element

 @action
  get() {
    let div = document.getElementById('map');
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    let td2 = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute('class', 'sfselect');
    div.appendChild(tr);
    tr.appendChild(td);
    td.appendChild(select);

    for (var i = 0; i < sf.length; i++) {
      var option = document.createElement('option');
      option.value = sf[i];
      option.text = sf[i];
      select.appendChild(option);
    }
    var select2 = document.createElement('select');
    select2.setAttribute('class', 'dbselect');
    tr.appendChild(td2);
    td2.appendChild(select2);

    for (var i = 0; i < db.length; i++) {
      var option = document.createElement('option');
      option.value = db[i];
      option.text = db[i];
      select2.appendChild(option);
    }
  }

controller code for getting data

  @action submit() {
    var sfattr = document.querySelectorAll('.sfselect');
    var dbattr = document.querySelectorAll('.dbselect');
    var sf = [];
    var db = [];
    console.log(sfattr.length);
    let datas;
    for (var i = 0; i < sfattr.length; i++) {
      sf[i] = sfattr[i].value;
      db[i] = dbattr[i].value;
    }
    let m1 = sf.toString();
    let m2 = db.toString();
    $.ajax({
      url: 'http://localhost:8080/lorduoauth/Map',
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      data: {
        m1: m1,
        m2: m2,
      },

      success: function (response) {
        console.log(datas);
        alert(response);
      },
      error: function (xhr, status, error) {
        var errorMessage = xhr.status + ': ' + xhr.statusText;
        alert('error' + errorMessage);
      },
    });
  }

thus the output looks like this

Answered By - hariharan baskaran

Answer Checked By - Clifford M. (PHPFixing Volunteer)