1

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>

3
  • Faltan métodos para poder reproducir el error que tienes, por ejemplo 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 favor
    – Yikarus
    el 11 nov. 2017 a las 17:33
  • Tu código necesita un análisis lógico con más profundidad. Una de las cosas que hace mal es crear elementos con el mismo id... 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.
    – A. Cedano
    el 11 nov. 2017 a las 18:23
  • Gracias, lo probaré...
    – Sonia
    el 11 nov. 2017 a las 18:31

2 respuestas 2

1

Con esta respuesta pretendo enfocar tu problema desde otro punto de vista, intentando dar una solución más simple a algo que, de acuerdo a tu lógico inicial parecía ser complicado.

El punto esencial de esta solución está en la forma de agregar/borrar los datos. En vez de tener dos botones dedicados a cada acción, podemos manejar la acción de agregar/borrar mediante un checkbox, el cual, cuando esté marcado indicará que ese elemento debe ser agregado y cuando esté desmarcado ese elemento deberá ser borrado.

Aquí el agregado se hace de forma inmediata, porque desconozco todo el contexto de tu programa. No obstante, esta aproximación de resolución del problema podría tener una ventaja adicional si así lo prefirieses: en lugar de estar constantemente añadiendo y quitando podrías, al terminar, recorrer todos los checkbox, agregando sólo aquellos que estén marcados (haciéndolo así ganarías en rendimiento y simplicidad).

Otra de las ventajas de este código es que crea elementos con ids diferentes, por lo que los puedes tratar como elementos únicos en cualquier momento.

Para un código más robusto, sería necesario someter el array a una función que evite los duplicados, en el caso de que se introduzcan dos valores que sean iguales, y que ordene el array en el caso de que elementos de más arriba sean desmarcados o luego marcados... fíjate que todo eso se evitaría con solamente construir tu array al final, desde un botón de validación que leyese todos los checkbox, recuperando únicamente los valores de aquellos que estén marcados.

Otra ventaja en ese sentido es la posibilidad de corregir cualquier valor que se haya escrito con error y que decidas cambiar posteriormente...

Quizá haya formas más fáciles de hacer esto. No soy un gran experto en JS, pero creo que esta solución podría ayudarte a encontrar una salida más adecuada a tu problema.

Espero te sirva.

Nota: Por falta de tiempo he elaborado solamente el código de agregar/borrar los elementos. Las otras acciones, si te decides por esta aproximación, se verían simplificadas y serían incluso, quizás, innecesarias.

document.addEventListener("DOMContentLoaded",main);
function main(){
	var formacion = new Array();
	var mas = document.getElementById("mas");
	var chkAgregar = document.getElementById("chkAgregar");
	chkAgregar.addEventListener("change", anadirCajaNew, true);
	
	var unaVez = function(element) { 	
		element.addEventListener('click', function(event) {
			var idCount=formacion.length;
			idYear="year"+idCount;
			idCurso="curso"+idCount;
			var divPrimero = document.getElementById("primero");
			var divResto = document.createElement("div");
			divPrimero.append(divResto);
			divResto.setAttribute("class", "visible"+idCount);
			divResto.setAttribute("id", "id"+idCount);
			divResto.setAttribute("name", "cajas");				
			var inputAnno = document.createElement("input");
			var inputCurso = document.createElement("input");
			var chkBox = document.createElement("input");
			var lblBox = document.createElement("label");
	
			chkBox.setAttribute("type","checkbox");
			chkBox.setAttribute("chk",idYear);
			chkBox.setAttribute("id", "id"+idCount);
			lblBox.innerHTML="Marque para agregar";

			inputAnno.setAttribute("type","text");
			inputAnno.setAttribute("id",idYear);
			inputAnno.setAttribute("size","2");
			inputCurso.setAttribute("type","text");
			inputCurso.setAttribute("id",idCurso);
			inputCurso.setAttribute("size","50");
	        chkBox.addEventListener("click",unaVez(chkBox));
	        chkBox.addEventListener("change",anadirCajaNew);
	
			divResto.append(inputAnno);
			divResto.append(inputCurso);
			divResto.append(chkBox);
			divResto.append(lblBox);

		}, {once: true});	
	
	};

	unaVez(chkAgregar);

	function anadirCajaNew(e){
		thisParent=e.srcElement.parentNode;
		thisInputs=thisParent.getElementsByTagName('input');
		anno=thisInputs[0].value;
		curso=thisInputs[1].value;

		if (this.checked){

			formacion.push(anno+" "+curso);
			console.log(formacion);

		}else{

			strId=this.id;
			intIndex=strId.replace(/\D/g, "");
			formacion.splice(intIndex, 1);
			console.log(formacion);
		
		}
	}
}
	<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="year1" size="2" name="year">
				<label for="curso"></label>
				<input type="text" id="curso1" size="50"  name="curso">
				<input id="chkAgregar" type="checkbox" name="chkMas" />
				<label for="chkMas">Marque para agregar</label>

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

1
  • Gracias por tu comentario.
    – Sonia
    el 13 nov. 2017 a las 8:10
1

Revisando el marcado HTML que genera tú código, encontré las siguientes observaciones:

  1. Se crean elementos HTML con IDs duplicados, lo cual no es correcto de acuerdo a W3C - El atributo id. En la imagen mostrada a continuación, se denota que se repiten los IDs.

introducir la descripción de la imagen aquí

  1. Se añaden nuevas cajas dentro del nodo de la caja inicial. En la siguiente imagen se puede ver que las dos nuevas cajas con id="primero" están contenidas dentro de la caja inicial con id="primero". introducir la descripción de la imagen aquí

Por lo tanto, y entendiendo el objetivo real de lo que estás intentando lograr, propongo lo siguiente:

  1. Reducir y adaptar el marcado HTML para utilizar sólo los atributos necesarios para clonar el div que contiene los campos a guardar, sin duplicar sus IDs.
  2. El div que contiene los campos a guardar, tendrá asignada una clase row, sólo por legibilidad.
  3. Utilizar Node.cloneNode para clonar los divs con clase row, cuando se hace clic en el botón +, de modo que ya no hay necesidad de preocuparse por renombrar los IDs de cada elemento, que se haya añadido mediante programación.
  4. Mostrar el botón + sólo cuando exista una caja div con la clase row, dentro del formulario.
  5. Almacenar todos los datos de las cajas div con clase row, sólo una vez, cuando se haga clic en el botón Validar, de modo que no hay necesidad de intentar actualizar el valor del array formacion en cierta posición necesaria, y así, siempre tener el array formacion con los datos actualizados.

Adjunto la versión de código modificado, con la explicación necesaria.

document.addEventListener("DOMContentLoaded", main);

function main() {
  var formacion = []; // Declarar el array formación utilizando [].
  
  /*
   Esta función sirve para hacer mostrar el botón más cuando sólo esté una caja div con la clase row, en el formulario. Recibe como parámetro un número entero, donde -1 significa que no existe el elemento condicionado para mostrar.
   */
  function resetButtons(index) {
    var rows = document.getElementsByClassName("row"); // Obtener las cajas div con la clase row.
    if (index === -1) {
      var buttons = document.querySelectorAll("div.row input[hidden]"); // Obtener los botones con el atributo hidden.
      buttons[rows.length - 2].removeAttribute("hidden"); // Remover el atributo hidden del penúltimo botón de la variable buttons que contiene el atributo hidden.
    }
  }

  /*
   Esta función sirve para establecer la funcionalidad de eliminar las cajas div con la clase row, para los botones [-].
   */
  function setRemoveAction() {
  
    // 2. La función eliminar(e) recibe como parámetro el contexto del elemento al que fue invocado, en este caso, el botón [-].
    function eliminar(e) {
      // Declarar e inicializar las variables.
      var elems = document.getElementsByClassName("row"),
        len = elems.length;
      if (len > 1) {
        var current = e.target.parentElement.nextSibling; // Contiene el nodo inmediatamente siguiente donde se encuentra el botón [-].
        if (current.className !== undefined) {
          resetButtons(current.className.indexOf("row"));
        }
        e.target.parentElement.remove(); // Eliminar la caja div con clase row, del contexto que pertenece al botón [-] que se hizo clic.
        setRemoveAction(); // Ejecutar esta función para establecer la funcionalidad de eliminar cajas.
        setAddAction(); // Ejecutar esta función para establecer la funcionalidad de añadir cajas.
      } else {
        alert("No se puede eliminar.");
      }
    }
    // 1. Declarar e inicializar las variables.
    var menos = document.getElementsByClassName("menos"), i, len = menos.length, button;
    for (i = 0; i < len; i++) {
      button = menos[i]; // Encontrar el botón [-].
      button.onclick = eliminar; // Asignar la función eliminar() en su evento click.
    }
  }

  /*
   Esta función sirve para establecer la funcionalidad de añadir las cajas div con la clase row, para los botones [+].
   */
  function setAddAction() {
    
    // 2. La función agregar(e) recibe como parámetro el contexto del elemento al que fue invocado, en este caso, el botón [+].
    function agregar(e) {
      // Declarar e inicializar las variables.
      var node = e.target.parentElement, newNode = node.cloneNode(true);
      e.target.parentElement.parentElement.insertBefore(newNode, node.parentElement.lastChild.previousSibling); // Insertar el nodo clonado antes del último nodo que contiene los botones Validar y Borrar.
      e.target.setAttribute("hidden", "hidden"); // Ocultar el botón [+].
      setRemoveAction(); // Ejecutar esta función para establecer la funcionalidad de eliminar cajas.
        setAddAction(); // Ejecutar esta función para establecer la funcionalidad de añadir cajas.
    }
    // Declarar e inicializar las variables.
    var mas = document.getElementsByClassName("mas"), i, len = mas.length, button;
    for (i = 0; i < len; i++) {
      button = mas[i]; // Encontrar el botón [+].
      button.onclick = agregar; // Asignar la función agregar(), en su evento click.
    }
  }

  /*
   Esta función sirve para iterar sobre las cajas div con clase row para almacenar en el array formacion, un objeto {year: year, curso:curso}, conteniendo los datos, correspondientemente.
   */
  function getData() {
    var rows = document.getElementsByClassName("row"), i, len = rows.length;
    formacion = []; // Reinicializar el array formacion para siempre tener los datos actualizados.
    for (i = 0; i < len; i++) {
      formacion.push({
        year: document.getElementsByName("year")[i].value, // Utilizar el índice i, para acceder al elemento correspondiente.
        curso: document.getElementsByName("curso")[i].value
      });
    }
    return formacion; // Retonar el array formacion con los datos recopilados.
  }
  
  var btnValidar = document.getElementById("btnValidar");
  btnValidar.onclick = function() {
    // Declarar e inicializar las variables necesarias.
    var i, data = getData(), len = data.length, obj, html = "", datosFinales = document.getElementById("datosFinales"), listaFormacionFinal = document.getElementById("listaFormacionFinal");
    for (i = 0; i < len; i++) {
      obj = data[i];
      html += "<li>Year: ";
      html += obj.year;
      html += " - Curso: ";
      html += obj.curso;
      html += "</li>";
    }
    datosFinales.removeAttribute("class"); // Remover la clase de datosFinales para que sea visible.
    listaFormacionFinal.innerHTML = html; // Imprimir el contenido de la variable html en la listaFormacionFinal.
  };

  // Al inicio se deben ejecutar estas funciones para asignar las funcionalidades correspondientes.
  setRemoveAction();
  setAddAction();
}
#contenedor {
  margin: 0 auto;
  width: 75%;
}

.row {
  border: solid 1px #ccc;
  margin: 2px;
}

input {
  border-radius: 3px;
}

#contenedor #formulario p {
  font-family: Courier, "Lucida Console", monospace;
  font-size: 25px;
  font-weight: bold;
}

.oculto {
  display: none;
}

#datosFinales {
  margin: 0 auto;
  width: 75%;
}

div div {
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Práctica a Entregar</title>
</head>

<body>
  <h1>Solicitud de empleo</h1>
  <div id="contenedor">
    <form name="prueba" action="#" id="formulario">
      <p>Formacion:</p>
      <div class="row">
        <label>
          Año
          <input type="text" size="2" name="year" />
        </label>
        <label>
          Curso
          <input type="text" size="50" name="curso" />
        </label>
        <input type="button" class="menos" value="-" />
        <input type="button" class="mas" value="+" />
      </div>
      <div>
        <button type="button" id="btnValidar" value="validar">Validar</button>
        <button type="reset" id="btnBorrar" value="borrar">Borrar</button>
      </div>

    </form>
  </div>
  <div id="datosFinales" class="oculto">
    <p>Formacion:</p>
    <ul id="listaFormacionFinal"></ul>
  </div>
</body>

</html>

El resultado final del marcado HTML es: introducir la descripción de la imagen aquí

Muestro en formato JSON, los datos que contendrían el array formacion:

[
  {
    "year": "2000",
    "curso": "Curso 1."
  },
  {
    "year": "2001",
    "curso": "Curso 1."
  },
  {
    "year": "2002",
    "curso": "Curso 3."
  },
  {
    "year": "2003",
    "curso": "Curso 4."
  }
]

Espero te pueda servir de ayuda. :)

2
  • Gracias por tu comentario!
    – Sonia
    el 13 nov. 2017 a las 8:10
  • De nada @Sonia, si tienes algunas dudas con el código fuente, puedes consultar cuando gustes. el 13 nov. 2017 a las 16:03

Tu Respuesta

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

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