In a formulario
there is a "Delete" button, whose HTML code is the following:
<input type="button" id="eliminar" value="Eliminar disco"/>
Form which exists a field called "Name" with id="nombre"
, which can be passed a name (case-insensitive) and looks for it in the array and if it exists, we delete the object whose name has the name name of the field.
For example: I add to the array a disk object whose name="MusicaShow", then I want to delete it, inserted in the name field of the form the name "MusicaShow", I hit the "Delete" button and it must automatically delete the object of the array.
--- Why do not you delete the object whose name is the one I assign to the "name" field? ---
Javascript code of the deleteDisco method (name):
this.deleteDisco = function (nombre){
for(var i=0; i<this.arrayDiscos.length; i++){
if(this.arrayDiscos[i].nombre == nombre){
this.arrayDiscos.splice(i,1);
break;
}
}
}
COMPLETE code in the form file.js:
/*Creo un objeto/instancia de la clase Tienda.*/
var miTienda = new Tienda();
/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.addEventListener('load', iniciar, true);
//Función que se ejecuta tras cargarse el documento y registra el resto de eventos.
function iniciar(){
//Evento para validar los campos y comprobar que los datos son correctos, así como también guardar un disco en la tienda.
document.getElementById('guardar').addEventListener('click', guardarDisco, false);
//Evento para eliminar un disco de la tienda. Si coincide el nombre lo eliminamos, sino mensaje de "No encontrado".
document.getElementById('eliminar').addEventListener('click', eliminarDisco, false);
}
/******************************************************************************
**************** FUNCIONES PARA LA COMPROBACIÓN DE LOS CAMPOS ****************
******************************************************************************/
//Función que se encarga de validar los campos del formulario.
function guardarDisco(evento){
//Valido los diferentes apartados del formulario. Si todo está OK...
if (validarCamposText(this) && comprobarNombre() && comprobarCantante() && comprobarAnio() && comprobarEstanteria() && comprobarTipo() && confirm("¿Deseas enviar el disco?")){
var nombre = document.getElementById('nombre').value;
var cantante = document.getElementById('cantante').value;
var anio = document.getElementById('anio').value;
var estanteria = document.getElementById('estanteria').value;
var tipo = document.getElementById('tipo').value;
var radio_prestado = document.getElementsByName('prestado');
var prestado;
for (var i=0; i<radio_prestado.length; i++) {
//Así cogemos el valor del radio que esté checked.
if (radio_prestado[i].checked) {
prestado = radio_prestado[i].value;
break;
}
}
//Creamos el objeto de tipo Disco con los valores del formulario pasados como parámetros.
var disco = new Disco(nombre, cantante, anio, tipo, estanteria, prestado);
//Comprobamos si existe el nombre del disco en nuestro almacen...
if(miTienda.existeDisco(nombre)){
//Si existe el nombre ya en el arrayDiscos...
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' YA EXISTE.";
limpiar();
}else{ //Si no existe el nombre del disco en la tienda, lo agregamos.
//Añadimos el disco a la tienda. Automáticamente lo añade en el array "arrayDiscos".
miTienda.addDisco(disco);
//Mostramos los discos en el div "listado".
mostrarDiscos();
//Si se ha insertado correctamente la información, mensaje de que el disco fue agregado.
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' SE HA INSERTADO CORRECTAMENTE.";
limpiar();
return true;
}
}else{
//Cancelar el evento por defecto del envío del formulario.
evento.preventDefault();
return false;
}
}
//Mostramos los discos en el div listado.
function mostrarDiscos(){
var caja_verde = document.getElementById("listado");
if(miTienda.getNumeroDiscos()!=0){
var codigo = "HAY "+miTienda.getNumeroDiscos()+ " DISCOS DISPONIBLES:<ul>";
for(var i=0; i<miTienda.getNumeroDiscos(); i++){
codigo += "<li>"+miTienda.getNombreDisco(i)+"</li>";
}
codigo += "</ul>";
caja_verde.innerHTML = codigo;
}
}
//Función para validar todos los campos input de tip "text".
function validarCamposText(objeto){
//La propiedad form del botón enviar contiene la referencia del formulario dónde está ese botón submit.
var formulario = objeto.form;
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Eliminamos la clase Error que estaría asignada a algún campo.
formulario.elements[i].className="";
}
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Escogemos los que son de tipo "text" y los que están vacíos...
if (formulario.elements[i].type == "text" && formulario.elements[i].value.trim()==""){
//Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
document.getElementById("errores").innerHTML="EL CAMPO "+formulario.elements[i].name+" NO PUEDE ESTAR VACÍO.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
//Aprovechamos para tratar el campo "Año", sólo debería admitir un valor numérico entre 200 y 2017.
}else if (formulario.elements[i].id=="anio"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <2000 || formulario.elements[i].value >2017){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o el año no está entre 2000 y 2017.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}else if (formulario.elements[i].id=="estanteria"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <0 || formulario.elements[i].value >10){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o la estantería no está entre 0 o 10.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}
}
return true;
}
//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
if (!document.getElementById("nombre").value.trim()==""){
var nombre = document.getElementById('nombre').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo NOMBRE es obligatorio.";
document.getElementById("nombre").focus();
return false;
}
}
//Función para comprobar que el campo cantante no está vacío.
function comprobarCantante(){
if (!document.getElementById("cantante").value.trim()==""){
var cantante = document.getElementById('cantante').value.trim();
return true;
}else{
document.getElementById("errores").innerHTML="El campo CANTANTE es obligatorio.";
document.getElementById("cantante").focus();
return false;
}
}
//Función para comprobar que el campo anio no está vacío. Se deberá controlar con una expresión
//regular que tenga el formato: 2003, 2013, 2015... --> 4 dígitos.
function comprobarAnio(){
//4dígitos.
var patron = /^\d{4}$/;
//Analizamos el patrón.
if (patron.test(document.getElementById("anio").value)){
document.getElementById("anio").className="";
return true;
}else{
document.getElementById("errores").innerHTML="El campo AÑO es obligatorio.";
document.getElementById("anio").focus();
return false;
}
}
//Función para comprobar que el campo estanteria no está vacío.
function comprobarEstanteria(){
if (!document.getElementById("estanteria").value==""){
var estanteria = document.getElementById('estanteria').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo ESTANTERIA es obligatorio.";
document.getElementById("estanteria").focus();
return false;
}
}
//Función que comprueba que no se elige la opción por defecto "Elige uno...".
function comprobarTipo(){
if (document.getElementById("tipo").value!="none"){ //Para comparar con el texto sería: .text="Elige uno..."
var tipo = document.getElementById('tipo').value;
return true;
}else{
document.getElementById("errores").innerHTML="El campo TIPO debe elegir una opción.";
document.getElementById("tipo").focus();
return false;
}
}
//Función para limpiar todos los campos del formulario: de tipo "text".
function limpiar(){
var cajas_texto = document.getElementsByTagName("input");
for(var i=0; i<cajas_texto.length; i++)
if(cajas_texto[i] && cajas_texto[i].type == "text")
cajas_texto[i].value="";
}
//Función para eliminar un disco de la tienda. Lo eliminaremos mediante el campo "Nombre".
function eliminarDisco(){
var nombre = document.getElementById('nombre').value;
//Si existe el nombre en el array "arrayDiscos", eliminamos el disco (el objeto completo).
if(miTienda.deleteDisco(nombre)){
document.getElementById("errores").innerHTML="EL DISCO '"+nombre+"' SE HA ELIMINADO DE LA TIENDA.";
//Actualizamos los discos que tenemos en la tienda.
mostrarDiscos();
limpiar();
return true;
}else{
//Si NO EXISTE ningun disco con ese titulo/nombre, mensaje.
document.getElementById("errores").innerHTML="NO EXISTE NINGUN DISCO CON EL NOMBRE '"+nombre+"'.";
document.getElementById("nombre").focus();
return false;
}
}