Buenas a todos... Mi objetivo es meter en un array los datos que vaya metiendo de dos inputs de mi formulario, con la salvedad de que al pulsar el boton más, se guarde la información en un array, y se crea otro elemento nuevo "caja /div", dos inputs más para rellenar con sus dos botón correspodiente. Y si doy al botón menos, elimine la informacion de ese registro en el array.
El problema que tengo es el siguiente: He conseguido crear los dos inputs más los dos botones de "+" y "-" y eliminar los inputs y los botones. No consigo meter información en el array, solo de la primera caja de inputs, las siguientes cajas no consigo meter la información en el array. Os dejo mi código para que le echeis un vistazo y espero que alguién me ayude. Gracias!
FICHERO HTML:
//cargamos el documento, sin el contenido multimedia
document.addEventListener("DOMContentLoaded",main);
function main(){
var formacion = new Array();
//recogemos en un array los datos que haya en formacion
function recogerFormacion(){
var anno = document.getElementById("year").value;
var curso = document.getElementById("curso").value;
var lista = document.getElementById("listaFormacionFinal");
formacion.push(anno+" "+curso);
console.log(formacion);
var datos = document.createElement("li");
datos.innerHTML = anno+" "+curso;
lista.appendChild(datos);
}
//function para el botón "+"
function anadirCaja(){
var divPrimero = document.getElementById("primero");
var divResto = document.createElement("DIV");
divPrimero.append(divResto);
divResto.setAttribute("class", "visible");
divResto.setAttribute("id", "primero");
divResto.setAttribute("name", "cajas");
var inputAnno = document.createElement("input");
var inputCurso = document.createElement("input");
var inputBotonMenos = document.createElement("input");
var inputBotonMas = document.createElement("input");
inputAnno.setAttribute("type","text");
inputAnno.setAttribute("id","year");
inputAnno.setAttribute("size","2");
inputCurso.setAttribute("type","text");
inputCurso.setAttribute("id","curso");
inputCurso.setAttribute("size","50");
inputBotonMenos.setAttribute("type","button");
inputBotonMenos.setAttribute("id","menos");
inputBotonMenos.setAttribute("value","-");
inputBotonMas.setAttribute("type","button");
inputBotonMas.setAttribute("id","mas");
inputBotonMas.setAttribute("value","+");
inputBotonMas.addEventListener("click", anadirCaja);
inputBotonMenos.addEventListener("click",quitarCaja);
divResto.append(inputAnno);
divResto.append(inputCurso);
divResto.append(inputBotonMenos);
divResto.append(inputBotonMas);
recogerFormacion();
}
//funcion para el boton "-"
function quitarCaja(){
var cajas = document.getElementsByName("cajas");
var cajaEliminar = document.getElementById("segundo");
var totalCajas = cajas.length;
console.log(totalCajas);
if(totalCajas == 1){
alert("No se puede eliminar");
} else {
cajaEliminar.parentNode.removeChild(cajaEliminar);
}
}
//Ocultamos el formulario y mostramos los datos recogidos
function mostrarDatosFinales(){
if(recogerFormacion()){
var ocultarFormulario = document.getElementById("contenedor");
ocultarFormulario.className="oculto";
var mostrarDatos = document.getElementById("datosFinales");
mostrarDatos.className="visibleFinal";
}
}
//boton de reset: blanqueamos los campos
function borrarDatos(){
document.forms.prueba.nombre.value ="";
document.forms.prueba.apellidos.value ="";
document.forms.prueba.dni.value ="";
document.forms.prueba.correo.value ="";
document.forms.prueba.year.value ="";
document.forms.prueba.curso.value ="";
document.forms.prueba.textarea.value ="";
}
var boton = document.getElementById("boton");
boton.addEventListener("click",mostrarDatosFinales);
var botonr = document.getElementById("botonb");
botonr.addEventListener("click",borrarDatos);
var mas = document.getElementById("mas");
mas.addEventListener("click",anadirCaja);
var menos = document.getElementById("menos");
menos.addEventListener("click",quitarCaja);
}
#contenedor{
width: 75%;
margin: 0 auto;
}
input{
display: block;
border-radius: 3px;
}
#boton{
margin-top: 5px;
}
#contenedor > #formulario >p{
font-size: 25px;
font-family: Courier, "Lucida Console", monospace;
font-weight: bold;
}
#primero > input {
display: inline;
border-radius: 3px;
margin: 2px;
}
input#mas{
margin-left: 15px;
border-radius: 7px;
}
input#menos{
margin-left: 15px;
border-radius: 7px;
}
.oculto{
display:none;
}
.visibleFinal p{
display:inline;
width: 75%;
margin-left: 0px;
}
#primero > input {
display: inline;
border-radius: 3px;
margin: 3px;
}
#primero > input#mas{
margin-left: 18px;
border-radius: 7px;
}
#primero > input#menos{
margin-left: 17px;
border-radius: 7px;
}
#datosFinales{
width: 75%;
margin: 0 auto;
}div > div {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Práctica a Entregar</title>
<meta charset="utf-8">
<script type="text/javascript" src="1.js">
</script>
<link rel="stylesheet" type="text/css" href="practica1.css">
</head>
<body>
<h1>Solicitud de empleo</h1>
<div id="contenedor" class="visible">
<form name="prueba" action="#" id="formulario">
<p>Formacion:</p>
<div class="visible" id="primero" name="cajas">
<label for="year"></label>
<input type="text" id="year" size="2" name="year">
<label for="curso"></label>
<input type="text" id="curso" size="50" name="curso">
<input type="button" id="menos" value="-">
<input type="button" id="mas" value="+">
</div>
<button type="button" id="boton" value="validar">validar</button>
<button type="button" id="botonb" value="borrar">Borrar</button>
</form>
</div>
<div id="datosFinales" class="oculto">
<p>Formacion:</p>
<ul id="listaFormacionFinal"></ul>
</div>
</body>
</html>
mostrarDatosFinales
podrías asegurar que el código que dejas es reproducible al 100% por favor, puedes hacerlo con la opción de snippet que viene integrada con la plataforma, o con una liga de jsfiddle.net por favorid
... lo cual es una mala práctica. Estuve haciendo pruebas y una de las cosas que hace es, estés donde estés, te agrega siempre los mismos datos, porque siempre recoge los datos por esos ids que son siempre los mismos... lo que hace entonces es tomar los datos del primer id que encuentra. Debes al menos tener un contador, para anexarlo al id de cada elemento y entonces no tendrás problemas, ya que cada elemento se podrá identificar como único.