如何从javascript函数获取动态输入字段的值?

时间:2017-12-08 00:49:19

标签: javascript jquery html dynamic-forms

我正在尝试使用javascript函数制作动态表单,但我对此非常业余,所以我不确定如何收集输入值,考虑是动态函数。这是HTML部分:

<div>
   Amount of people: <input type="text" id="member" name="member" value=""><br />
   <button id="btn" onclick="addinputFields()">Show</button>
</div>
<form action="{{ url_for('red_preferente') }}" method="post">
     <div id="mydiv"/><br />
     <input type="submit" value="Quote"/>
</form>

这是JS函数“addinputFields”,我在上面调用

function addinputFields(){
var number = document.getElementById("member").value;

  for (i=0;i<number;i++){
      var campo_1 = document.createElement("output");
      campo_1.type = "text";
      campo_1.value = " Nombre: ";
      mydiv.appendChild(campo_1);

      var nombre = document.createElement("input");
      nombre.type = "text";
      nombre.id = "name"
      mydiv.appendChild(nombre);

      var campo_2 = document.createElement("output");
      campo_2.type = "text";
      campo_2.value = " Edad: ";
      mydiv.appendChild(campo_2);

      var edad = document.createElement("input");
      edad.type = "text";
      edad.id = "age"
      mydiv.appendChild(edad);

      var campo_3 = document.createElement("output");
      campo_3.type = "text";
      campo_3.value = " Modalidad: ";
      mydiv.appendChild(campo_3);

      var modalidades = ["Titular","Asegurado","Dependiente"];
      var listado = document.createElement("select");
      listado.id = "mySelect";

      for (var x = 0; x < modalidades.length; x++) {
          var option = document.createElement("option");
          option.value = modalidades[x];
          option.text = modalidades[x];
          listado.appendChild(option);
      }
      mydiv.appendChild(listado);
  }}

我正在尝试使用“document.getElementById('mydiv')。value”来获取输入值,但我没有收到任何值

我需要每个vars的输入值:nombre,edad,listado。有什么想法吗?

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您的问题可能有很多原因。因为输入是字符串,所以你应该使用

来输入你的输入
var number = parseInt(document.getElementById("member").value);

问题似乎在于createElement()陈述。您的<variable name>.value不对。这仅适用于<input><textarea>的值。更简单的就是摆脱createElement()。在

var campo_1 = document.createElement("output");
campo_1.type = "text";
campo_1.value = " Nombre: ";
mydiv.appendChild(campo_1);

行可以很容易地重写

mydiv.innerHTML += "Nombre: ";