Obtener valores de inputs dinamicos javascript

publicado por: Anonymous

Estoy tratando de crear un arreglo bidimensional con datos dinamicos. Esos datos son pedidos al usuario a traves de unos inputs. El programa primero te pide el tamaño de la matriz y a partir de eso se generan unos inputs dinamicos con base en el orden que escogiste. El problema es que ya pude generar los inputs pero ahora no se como accesar a cada valor y guardar todo en un arreglo, bidimensional obvio.

Hasta ahora llevo esto:

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

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

Alguna idea de como obtener los valores y meterlos en un arreglo? gracias de antemano!

solución

Se podría seleccionar los inputs añadiéndoles una clase que los identifique. por ejemplo una clase entrada . Para simular el ejemplo añadí valores de entrada y utilicé una variable temporal para añadir un array dentro de otro

_x000D_

_x000D_

$("#btnMostrar").hide();_x000D_
// Valor seleccionado del Select_x000D_
let val = 0;_x000D_
$('#matriz').change(function(){_x000D_
  $("#btnMostrar").show();_x000D_
  val = parseInt($(this).val());_x000D_
  var innerhtml = '';_x000D_
  for (var i = 0; i < val; i++) {_x000D_
    for (var j = 0; j < val; j++) {_x000D_
        innerhtml += "<input type='text' class='entrada' value='"+(j + i)+1+"' placeholder='' id='" + (j + 1) + "' name='" + (j + 1) + "' size=5>";_x000D_
    }_x000D_
    innerhtml+="<br>";_x000D_
  }_x000D_
  var display = $(this).next('#mostrarMatriz');_x000D_
  display.html(innerhtml);_x000D_
});_x000D_
_x000D_
$("#btnMostrar").click(function(event) {_x000D_
	let array = [];_x000D_
  //Seleccionamos los inputs creados_x000D_
	let inputs = document.querySelectorAll('.entrada');_x000D_
	let temp = [];_x000D_
	for (var i = 0; i < inputs.length; i++) {_x000D_
		//Añadimos al arreglo temporal para el 2D_x000D_
		temp.push(inputs[i].value);_x000D_
		//Si es igual al orden de la matriz_x000D_
		// Entonces lo añadimos al array principal y_x000D_
		// reseteamos el temporal_x000D_
		if(temp.length == val){_x000D_
			array.push(temp);_x000D_
			temp= [];_x000D_
		}_x000D_
	}_x000D_
	console.log(array);_x000D_
});

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *