1

Seguí un tutorial sobre como crear inputs dinámicamente y me funcionó, ahora me gustaría envíar los valores de de esos inputs por AJAX a un PHP, he visto que al recibir los datos en PHP estos son tratados como un arreglo. Hasta ahí lo entiendo bien, sin embargo no se como puedo envíar los datos de esos inputs por AJAX, probe con lo mas sencillo, solo asignar los valores en una variable y mostrarlos por consola, pero me dice undefined. Acá dejo el código del tutorial que seguí.

    <!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Form de Inputs Dinamicos</title>
    <link rel="stylesheet" href="estilos/estilos.css">
  </head>
  <body>

    <!-- Elementos html -->
    <h1>Formulario dinamico</h1>
    <div class="field_wrapper">
      <div>
        <input type="text" name="field_name[]" id="d" value="" />
        <a href="javascript:void(0);" class="add_button" title="Agregar campo"> <img class="add-icon" src="add.png" /></a>
        <div>
          <button type="submit" class="btn-enviar" onclick="enviarAJAX()">Enviar Datos</button>
        </div>
      </div>
    </div>

    <!-- Scripts JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">

      $(document).ready(function(){
        var maxField = 10; //Limite de campos que se pueden agregar
        var addButton = $('.add_button'); //Selector del boton agregar
        var wrapper = $('.field_wrapper'); //Campo de entrada
        var fieldHTML = '<div><input type="text" name="field_name[]" id="d" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img class="remove-icon" src="remove.png"/></a></div>'; //Nuevo campo html
        var x = 1; //Contador inicial del campo es 1
        $(addButton).click(function(){ //Cada vez que el boton agregar es presionado
          if(x < maxField){ //Revisa el numero maximo de camps
            x++; //Incrementa el contador
            $(wrapper).append(fieldHTML); //Agrega campo html
          }

          if(x == maxField){
            alert('Ha alcanzado el maximo de campos que puede agregar');
          }

        });
        $(wrapper).on('click', '.remove_button', function(e){ //Cada vez que el boton eliminar es presionado
          e.preventDefault();
          $(this).parent('div').remove(); //Elimina el campo html
          x--; //Decrementa el contador
        });
      });
    </script>
  </body>
</html>

El formulario empieza con un solo input, con un boton para agregar otro campo de texto y un botón para enviar los datos. Si se presiona el botón para agregar otro campo de texto, se ejecuta un método que genera código HTML el cual crea el nuevo campo y un botón para remover ese mismo campo. Algo particular de estos campos es que tanto el campo inicial como los generados tienen el mismo name, pero su valor es tratado como un arreglo, es decir de esta manera: name="field_name[]"

Ahora intente obtener sus valores por su nombre de la siguiente manera:

    var inputs = document.getElementsByName('field_name').value;
console.log(inputs);

Pero al presionar el botón me dice que el valor es undefined, también intente agregando un id tanto al campo ya existente como al código que generará los campos nuevos, pero tampoco resulta. Incluso trate usando el método serialize() de JQuery, pero en este caso la consola no marca nada

var inputs = $('.field_wrapper').serialize();
    console.log(inputs);

Como podría obtener entonces los valores de estos campos y enviarlos por AJAX, agradezco de antemano sus respuestas.

2 respuestas 2

1

$(document).ready(function() {
  var maxField = 10; //Limite de campos que se pueden agregar
  var addButton = $('.add_button'); //Selector del boton agregar
  var wrapper = $('.field_wrapper'); //Campo de entrada
  var fieldHTML = '<div><input type="text" id="field_name" name="field_name[]" id="d" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img class="remove-icon" src="remove.png"/></a></div>'; //Nuevo campo html
  var x = 1; //Contador inicial del campo es 1
  $(addButton).click(function() { //Cada vez que el boton agregar es presionado
    if (x < maxField) { //Revisa el numero maximo de camps
      $(wrapper).append(fieldHTML); //Agrega campo html
      x++; //Incrementa el contador
    }

    if (x == maxField) {
      alert('Ha alcanzado el maximo de campos que puede agregar');
    }

  });
  $(wrapper).on('click', '.remove_button', function(e) { //Cada vez que el boton eliminar es presionado
    e.preventDefault();
    $(this).parent('div').remove(); //Elimina el campo html
    x--; //Decrementa el contador
  });
});

function enviarAJAX() {
  var values = $("input[id='field_name']")
    .map(function() {
      return $(this).val();
    }).get();
  alert(values);

  /*
  
      function enviarAJAX(){
         var values = $("input[id='field_name']")
              .map(function(){return $(this).val();}).get();
        var cantidad = $("#cantidad").val();
           $.ajax({
        url: 'pagina.php',
        method: 'POST',
        data:{values:values,cantidad:cantidad}
    }).done(function (data) {
    })
      }
      
 */
}
<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Form de Inputs Dinamicos</title>
</head>

<body>
  <!-- Elementos html -->
  <h1>Formulario dinamico</h1>
  <div class="field_wrapper">
    <div>
      <input type="text" name="field_name[]" id="field_name" value="" />
              <label>contador</label><input type="text" id="cantidad" value="1">
      <a href="javascript:void(0);" class="add_button" title="Agregar campo"> <img class="add-icon" src="add.png" /></a>
      <div>
        <button type="submit" class="btn-enviar" onclick="enviarAJAX()">Enviar Datos</button>
      </div>
    </div>
  </div>
  <!-- Scripts JS -->
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
</body>

</html>

pagina.php

<?php

$valor = $_POST["values"];
$cantidad = $_POST["cantidad"];
$valor_implod = implode(",",$valor);

$porciones = explode(",", $valor_implod);

for ($i=0; $i < $cantidad; $i++) { 
	echo $porciones[$i];
	echo "<br>";
	//	$sql = "insert into tabla (valor) values ('".$porciones[$i]."')";
}
echo $cantidad;

2
  • Gracias @Luis por tu respuesta, entonces si es válido obtener los valores a través del "id" de los campos?
    – Robert_Rmz
    Commented el 21 may. 2019 a las 18:30
  • Luis serias tan amable de explicar todo este codigo? y poner solo las partes relevantes y explicar las mismas?
    – gbianchi
    Commented el 21 may. 2019 a las 19:01
1

Te dejo un ejemplo muy básico en el que puedes obtener en un array los valores de los inputs con un mismo name, consiste en primero obtener el name de los input de esta forma: input[name^="input"] y despues, lo que hacemos es recorrer dichos input con el método .each() de Jquery, y al final, con .push() lo que hacemos es agregar al array que inicialmente creamos, los valores de los input.

Espero este pequeño ejempo te ayude o te oriente de alguna manera.

$('.btnObtener').on('click', () => {

  //Creamos array que almacenará los valores de cada input que se creó dinámicamente
  var arrayConValores = new Array();

  //Seleccionamos todos los inputs con el mismo 'name'
  let inputs = $('input[name^="input"]');

  //Recorremos los inputs y por cada input guardamos el valor en el array creado  
  $(inputs).each(function() {
    //Obtenemos el valor del input en curso
    arrayConValores.push($(this).val());
  });

  //Al final, mostramos el array, este array, es el que enviarás por AJAX 
  console.log(arrayConValores);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" name="input"><br>
<input type="text" name="input"><br>
<input type="text" name="input"><br>
<input type="text" name="input"><br>
<input type="text" name="input"><br>
<button class="btnObtener">Obtener valores</button>

2
  • Te agradezco la sugerencia @Fernando Chamorro pues no sabia como obtener los valores de los elementos HTML por su name, lo probare.
    – Robert_Rmz
    Commented el 21 may. 2019 a las 20:50
  • Ok, vale, con gusto. Recuerda que esto aplica a inputs que tengan el mismo name, es de gran ayuda cuando creas contenidos dinámicamente, yo pasé por esas hace un tiempo. Commented el 21 may. 2019 a las 20:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.