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:
<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 id="datosFinales" class="oculto"> <p>Formacion:</p> <ul id="listaFormacionFinal"></ul> </div>
fichero js: 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); } } 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);
}