Home How do i get the value of dynamic input fields from javascript function?
Reply: 1

How do i get the value of dynamic input fields from javascript function?

Juan Carlos Lizardo
1#
Juan Carlos Lizardo Published in 2017-12-08 00:49:18Z

I am trying to make a dynamic form using a javascript function, but i'm amateur on this, so i'm not sure how to collect the inputs values, considering is a dynamic function. This is the HTML part:

<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>

And this is the JS function "addinputFields", im calling above

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);
  }}

I'm trying to use "document.getElementById('mydiv').value" to have the input value, but i receive none value

I need each one of the input value of vars: nombre, edad, listado. Any idea?

Thanks a lot for help!

ericw31415
2#
ericw31415 Reply to 2017-12-08 02:12:19Z

There are many possible causes of your problem. Because inputs are strings you should cast your input using

var number = parseInt(document.getElementById("member").value);

The problem seems to lie around the createElement() statements. Your <variable name>.value isn't right. That only works for the value of an <input> or <textarea>. Simpler would have been to get rid of the createElement()s. The

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

lines could have easily been re-written

mydiv.innerHTML += "Nombre: ";
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.407008 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO