Javascript dynamic adding mutiple drop down list

Question

i want to achieve a dynamic form that will be generated when the button is pressed through javascript. right now only the textbox is working.

this is the drop down list in html and which i want to achieve in js dynamically using button

<form>
<select id="height">
<option value="Math.min(Math.max((2/-900*supposearea + 11.7222222222222),9.5),11.5)">method 1</option>
<option value="Math.min(Math.max((2/-900*supposearea + 10.2222222222222),8),10)">method 2</option>
</select>
</form>

the below is the js

var height = eval(document.getElementById("height").value);

right now i want to put the drop down into the add button code below

function add_field(){
  var total_text=document.getElementsByClassName('input_text');
  total_text=total_text.length+1;
  var p = document.createElement('p');
  p.setAttribute('id', 'input_text'+total_text+'_wrapper');
  var input1 = document.createElement('input');
  input1.setAttribute('type', 'text');
  input1.setAttribute('class', 'input_text');
  input1.setAttribute('id', 'length'+total_text);
  p.appendChild(input1);

  var input2 = document.createElement('input');
  input2.setAttribute('type', 'text');
  input2.setAttribute('class', 'input_text');
  input2.setAttribute('id', 'length'+total_text);
  p.appendChild(input2);

  var btn = document.createElement('input');
  btn.setAttribute('type', 'button');
  btn.setAttribute('value', 'Remove');
  btn.setAttribute('onclick', 'remove_field("input_text'+total_text+'")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
}

function remove_field(id){
  document.getElementById(id+'_wrapper').innerHTML = '';
}

function calculate(){
  var answer = 0;
  document.getElementById('Result').innerHTML = '';
  var inputs = document.querySelectorAll('input[type=text]');
  for(var i = 0; i<inputs.length; ){
    var length =  inputs[i].value;
    var width =  inputs[i+1].value;
    var area = length*width;
    i = i + 2;
    document.getElementById('Result').innerHTML += 'Answer '+ ++answer +') ' + area + '<br>';
  }
}

<div id="wrapper">
<div id="field_div">
  <input type="button" value="Add TextBox" onclick="add_field();">
</div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

i have tried a lot of methods but all of them doesn't seem to work. Really appreciate to those who can help :)

Almost never use eval(). It looks like you mean parseInt() or parseFloat(). — Mitya
– Mitya, Commented May 19, 2018 at 11:06
@Utkanos you beat me to it, wanted to say the exact same thing. If I may add, you shouldn't have the javascript as string in your HTML Math.min... — kemicofa
– kemicofa, Commented May 19, 2018 at 11:07
@Utkanos yeahhhh but you have anyway to make the dropdown list work? — NoobProgrammer
– NoobProgrammer, Commented May 20, 2018 at 10:35

NoobProgrammer · Accepted Answer · 2018-05-21 12:55:47Z

I did not understand your problem with that drop down and your considered logic for it. But I create this below example, which create dynamic select tag, add its options and also calculate a value depend to its value

function createSelect() {
  var select = document.createElement("select");
  select.id = "height";
  var array = [{
      title: "method 1",
      value: "f1"
    },
    {
      title: "method 2",
      value: "f2"
    }
  ];

  document.getElementById("wrapper").appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

function add_field() {
  var total_text = document.getElementsByClassName("input_text");
  total_text = total_text.length + 1;
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + total_text + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "length" + total_text);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "length" + total_text);
  p.appendChild(input2);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + total_text + '")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
}

function remove_field(id) {
  document.getElementById(id + "_wrapper").innerHTML = "";
}

function f1(supposearea) {
  return Math.min(
    Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5),
    11.5
  );
}

function f2(supposearea) {
  return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length;) {
    var length = inputs[i].value;
    var width = inputs[i + 1].value;
    var area = length * width;
    i = i + 2;
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + "<br>";

    var fId = document.getElementById("height").value;

    if (fId == "f1") {
      console.log(f1(area));
    } else {
      console.log(f2(area));
    }
  }
}

createSelect();

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Add TextBox" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

Also you can use official Function constructor. Your code will be like

var array = [
    {
      title: "method 1",
      value: "return Math.min( Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "method 2",
      value: "return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);"
    }
  ];

And Usage

var fId = document.getElementById("height").value;
var func = new Function("supposearea", fId);
console.log(func(area));

Full code

function createSelect() {
  var select = document.createElement("select");
  select.id = "height";
  var array = [{
      title: "method 1",
      value: "return Math.min( Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "method 2",
      value: "return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);"
    }
  ];

  document.getElementById("wrapper").appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

function add_field() {
  var total_text = document.getElementsByClassName("input_text");
  total_text = total_text.length + 1;
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + total_text + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "length" + total_text);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "length" + total_text);
  p.appendChild(input2);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + total_text + '")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
}

function remove_field(id) {
  document.getElementById(id + "_wrapper").innerHTML = "";
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length;) {
    var length = inputs[i].value;
    var width = inputs[i + 1].value;
    var area = length * width;
    i = i + 2;
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + "<br>";

    var fId = document.getElementById("height").value;
    var func = new Function("supposearea", fId);
    console.log(func(area));
  }
}

createSelect();

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Add TextBox" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

Update

I think this is your answer

var rowNumber = 0;

function createSelect(tag) {
  var select = document.createElement("select");
  select.id = "select-" + rowNumber;
  var array = [{
      title: "10 Grass",
      value: "return 1;"
    },
    {
      title: "20 Grass",
      value: "return 2;"
    },
    {
      title: "30 Grass",
      value: "return 3;"
    },
    {
      title: "40 Grass",
      value: "return 4;"
    },

    {
      title: "1",
      value: "return Math.min( Math.max(1212 / -243 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "2",
      value: "return Math.min(Math.max(23 / 100 * supposearea + 10.2222222222222, 8), 10);"
    },
    {
      title: "3",
      value: "return Math.min( Math.max(342 / 50 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "4",
      value: "Math.min(Math.max((244/232134*supposearea + 13.7222222222222),11.5),13.5);"
    }
  ];

  tag.appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}


function createSelect1(tag) {
  var select = document.createElement("select");
  select.id = "select-" + rowNumber;
  var array = [{
      title: "Original",
      value: "0.65"
    },
    {
      title: "10%",
      value: "1"
    }
  ];

  tag.appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}




function add_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);



  createSelect(p);
  createSelect1(p);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + rowNumber + '_wrapper")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

function remove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById('field_div').getElementsByTagName('p');
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;
    var fId = ps[i].childNodes[2].value;
    var func = new Function("supposearea", fId);
    var discount = ps[i].childNodes[3].value;
    var amount = area * (func(area));
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + " ----" + func(area) + '<br>' + amount / discount + "<br>";
  }
}

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Grass" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

Hope this helps you.

like when i press the button Add TextBox, i NEED the 2 textbox and a dropdown list to come out. So when if i click add textbox 2 times it should generate 4 textbox and 2 drop down list
Each row has specific drop down and use its formula?? @NoobProgrammer
no each row have the same drop down but each row can select different option from the same dropdown\

Collectives™ on Stack Overflow

Javascript dynamic adding mutiple drop down list

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related