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.