Get values of javascript dynamic inputs

Question

Get values of javascript dynamic inputs

Navigation

#1 by (1 votes)

0

I'm trying to create a two-dimensional array with dynamic data. These data are requested to the user through some inputs. The program first asks for the size of the matrix and from that, dynamic inputs are generated based on the order you chose. The problem is that I could already generate the inputs but now I do not know how to access each value and save everything in an obvious two-dimensional array.

So far I have this:

HTML:

<select id="matriz" >
      <option selected>Ingrese el orden de la matriz</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>

    <div class="" id="mostrarMatriz">

    </div>

    <input type="button" value="Mostrar matriz" id="btnMostrar">

And the JS:

$("#btnMostrar").hide();

        $('#matriz').change(function(){


            $("#btnMostrar").show();

          var val = $(this).val();
          var innerhtml = '';

          for (var i = 0; i < val; i++) {
            for (var j = 0; j < val; j++) {
                innerhtml += "<input type='text' placeholder='' id='" + (j + 1) + "' name='" + (j + 1) + "' size=5>";

            }
            innerhtml+="<br>";

          }

          var display = $(this).next('#mostrarMatriz');
          display.html(innerhtml);
        });

Any idea how to get the values and put them in a fix? thanks in advance!

javascript array input

asked by Julio Guzman 19.02.2018 в 03:20

source

1 answer

Unable to load the file or assembly 'Microsoft.CSharp php delete data

score 1 · Accepted Answer

You could select the inputs by adding a class that identifies them. for example a class entrada . To simulate the example I added input values and used a temporary variable to add a array within another

$("#btnMostrar").hide();
// Valor seleccionado del Select
let val = 0;
$('#matriz').change(function(){
  $("#btnMostrar").show();
  val = parseInt($(this).val());
  var innerhtml = '';
  for (var i = 0; i < val; i++) {
    for (var j = 0; j < val; j++) {
        innerhtml += "<input type='text' class='entrada' value='"+(j + i)+1+"' placeholder='' id='" + (j + 1) + "' name='" + (j + 1) + "' size=5>";
    }
    innerhtml+="<br>";
  }
  var display = $(this).next('#mostrarMatriz');
  display.html(innerhtml);
});

$("#btnMostrar").click(function(event) {
	let array = [];
  //Seleccionamos los inputs creados
	let inputs = document.querySelectorAll('.entrada');
	let temp = [];
	for (var i = 0; i < inputs.length; i++) {
		//Añadimos al arreglo temporal para el 2D
		temp.push(inputs[i].value);
		//Si es igual al orden de la matriz
		// Entonces lo añadimos al array principal y
		// reseteamos el temporal
		if(temp.length == val){
			array.push(temp);
			temp= [];
		}
	}
	console.log(array);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="matriz" >
  <option selected>Ingrese el orden de la matriz</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<div class="" id="mostrarMatriz">

</div>

<input type="button" value="Mostrar matriz" id="btnMostrar">