Cómo generar un objeto desde un formulario – Javascript

publicado por: Anonymous

Dispongo de dos clases:

  • Disco
  • Tienda

Los discos se guardan en la tienda siempre y cuando al introducirlos en un formulario estén correctamente rellenados los campos. Si todo está OK, pulsamos el botón “Guardar disco” y llamaremos a la función addDisco(disco), función a la cual le pasamos el disco con los datos del formulario.

Mi duda está en los comentarios siguientes: ¿cómo relleno con los datos del formulario un objeto de tipo Disco? ¿Se puede crear un div para mostrar el error en caso de que: “El campo nombre no es correcto”?

Os dejo el código probado y testeado de las clases Disco y Tienda.

//Clase Disco. Le pasamos los atributos necesarios. Método constructor.
var Disco = function(nombre, cantante, ano, tipo, estanteria){
    this.nombre = nombre; 
    this.cantante = cantante;
    this.ano = ano;
    this.prestado = false;

    //Comprobamos que existe el tipo de musica pasado por argumento.
    comprueba_tipo = function(tipo){
        //Array de tipos de musica.
        var array_tipos = ["rock", "pop", "puck", "indie"];
        //Si no existe en el array... establecemos la primera posición de éste.
        if(array_tipos.indexOf(tipo)<0){
            return array_tipos[0];
        }else{
            return tipo;
        }
    }

    //Establece la propiedad tipo de musica en funcion parametro tipo.
    this.setTipoMusica = function(tipo){
        this.tipo = comprueba_tipo(tipo);
    }
    this.tipo = comprueba_tipo(tipo);


    //Comprobamos que la porpiedad estanteria sea un valor entre 1 y 10. En caso
    //contrario, establecer el valor 0 por defecto.
    var comprueba_estanteria = function(estanteria){
        //Si la estanteria está entre 1 y 10, OK!
        if(isNaN(new Number(estanteria))){
                estanteria = 0;
        }else{
            //Si no esta entre 1 y 10, por defecto toma el valor 0.
            if(estanteria<1 || estanteria>10){
                estanteria = 0;
            }
        }
        return estanteria;
    }

    //Establece la propiedad estanteria validando que sea un valor numerico entre 1 y 10.
    this.setEstanteria = function(estanteria){
        this.estanteria = comprueba_estanteria(estanteria);
    }
    this.estanteria = comprueba_estanteria(estanteria);

    //Cambia la propiedad del estado del disco.
    this.presta = function(nuevoEstado){
        this.prestado = nuevoEstado;
    }

    //Metodo toString().
    this.toString = function(){
        return "El nombre del disco es "+this.nombre+" del cantante "+this.cantante+" fue publicado en "+this.ano+" de tipo de musica "+this.tipo+" en la estanteria "+this.estanteria+". Prestado: "+this.prestado+"";
    }
}


//Comprobar la clase. Creamos un objeto pasandole datos a los argumentos.
/*var miDisco = new Disco("MachupichuPop", "Osmar", 1990, "pop", 8);
console.log(miDisco.toString());
miDisco.presta(true);
miDisco.setEstanteria(3);
miDisco.setTipoMusica("mamamam");
console.log(miDisco.toString());*/


//Clase Tienda. Constructor sin parametros.
var Tienda = function(){
    //Creamos un array de discos.
    this.numTotalDiscos = new Array();

    //Devuelve el numero total de discos.
    this.getNumeroDiscos = function(){
        return this.numTotalDiscos.length;
    }

    //Devuelve el numero de discos que no estan prestados.
    this.getNumeroDiscosDisponibles = function(){
        var cantidad = 0;
        for(var i=0; i<this.numTotalDiscos.length; i++){
            if(this.numTotalDiscos[i].prestado==false){
                cantidad++;
            }
        }
        return cantidad;
    }

    //Añade un disco al array.
    this.addDisco = function(disco){
        this.numTotalDiscos.push(disco);
    }

    //Muestra los titulos de los discos almacenados.
    this.getTituloDisco = function(i){
        return this.numTotalDiscos[i].titulo;
    }

    //Devuelve el objeto Disco que esta en la posicion i-esima.
    this.getDisco = function(pos){
        return this.numTotalDiscos[pos];
    }

    //Elimina el disco cuyo titulo coincide con el que se pasa como parametro.
    this.deleteDisco = function (titulo){
        for(var i=0; i<this.numTotalDiscos.length; i++){
            if(this.numTotalDiscos[i].nombre == titulo){
                this.numTotalDiscos.splice(i,1);
                break;
            }
        }
    }

    //Devuelve verdadero si existe el disco cuyo titulo coincide con el que se pasa.
    this.existeDisco = function(tituloRecibido){
        var existe = false;
        for(var i=0; i<numTotalDiscos.length;i++){
            var titulo = this.numTotalDiscos[i].nombre;
            if(titulo==tituloRecibido)
                existe = true;
                break;
        }
        return existe;
    }

    //Modifica el titulo de un disco si existe.
    this.modificaDisco = function(titulo, nuevoDisco){
        for(var i=0; i<this.numTotalDiscos.length; i++){
            if(this.numTotalDiscos[i].nombre == titulo){
                this.numTotalDiscos[i] = nuevoDisco;
                break;
            }
        }   
    }
}


//Creamos una tienda, y en ella insertamos varios discos para comprobar el funcionamiento.
var miTienda = new Tienda();
var miDisco1 = new Disco("MachupichuPop111", "Osmar111", 1989, "pop", 3);
miDisco1.presta(true);
var miDisco2 = new Disco("MachupichuPop222", "Osmar222", 1990, "pop", 8);
var miDisco3 = new Disco("MachupichuPop333", "Osmar33", 1956, "indie", 11);
miDisco3.presta(false);
miTienda.addDisco(miDisco1);
miTienda.addDisco(miDisco2);
miTienda.addDisco(miDisco3);
console.log(miDisco1);
console.log(miDisco2);
console.log(miDisco3);
console.log("Tengo "+miTienda.getNumeroDiscos()+ " disco/s en la tienda");
console.log("Tengo "+miTienda.getNumeroDiscosDisponibles()+ " disco/s prestados en mi tienda");
console.log("En la posicion 3 está el objeto Disco:[[[ "+miTienda.getDisco(2)+" ]]]"); //[2] es la posicion 3, empieza a contar el array desde pos[0].

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <title>Mi tienda de discos</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="style/formulario.css" />
        <script src="js/disco.js"> </script>
        <script src="js/tienda.js"> </script>
        <script src="js/formulario.js"></script>
    </head>

    <body>
        <h1>Tienda de discos</h1>
        <form id="formulario"> 
            <div id="informacion" class="linea_formulario">
            </div>
            <div class="linea_formulario">
                <label for="nombre">Nombre del disco</label>
                <input type="text" name="nombre" id="nombre"  />
                <div class="limpia"> </div>
            </div>  

            <div class="linea_formulario">
                <label for="cantante">Cantante</label>
                <input type="text" name="cantante" id="cantante"  />
                <div class="limpia"> </div>
            </div>          

            <div class="linea_formulario">
                <label for="anio">Año</label>
                <input type="text" name="anio" id="anio"  />
                <div class="limpia"> </div>
            </div>          
            <div class="linea_formulario">
                <label for="estanteria">Estantería</label>
                <input type="text" name="estanteria" id="estanteria"  />
                <div class="limpia"> </div>
            </div>          

            <div class="linea_formulario">
                <label for="favorito">Tipo de música</label>
                <select name="tipo" id="tipo">
                    <option selected value="none">Elige uno...</option>         
                    <option  value="rock">Rock</option>
                    <option value="pop">Pop</option>
                    <option value="punk">Punk</option>
                    <option value="indie">Indie</option>
                </select>                       
                <div class="limpia"> </div>
            </div>

            <div class="linea_formulario">
                <label for="prestado">Prestado:</label>
                <div class="botones">
                  <input type="radio" name="prestado" id="prestado_si" value="si" /><span>Si</span>
                  <input type="radio" name="prestado" id="prestado_no" value="no" checked="checked"/><span>No</span>
                </div>
            </div>

            <div class="linea_formulario">  
                <input type="button" id="guardar" value="Guardar disco" /> 
                <input type="button" id="eliminar" value="Eliminar disco" />
                <input type="button" id="ver" value="Ver disco" />
                <input type="button" id="modificar" id="enviar" value="Modificar disco" />                      
                <div class="limpia"> </div>
            </div>

            <div id="listado" class="linea_formulario">
                Todavía no tienes ningún disco.
            </div>
        </form>
    </body>
</html>

Código Javascript (aquí las dudas, mirar comentarios):

/*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 que los campos estén con información correcta y NO estén vacíos.
    document.getElementById('guardar').addEventListener('click', validarCampos, false);
}


/******************************************************************************
 **************** FUNCIONES PARA LA COMPROBACION DE LOS CAMPOS ****************
 ******************************************************************************/

//Función que se encarga de validar los campos del formulario.
function validarCampos(evento){
    //Valido los diferentes apartados del formulario. Si todo está OK...
    if (validarCamposText(this) && comprobarNombre() && comprobarCantante() && comprobarAnio() && comprobarEstanteria() && confirm("¿Desea enviar el disco?")){
        return true;
        //Guardamos el disco en la tienda. Para ello tenemos la variable/objeto tienda llamada "miTienda".
        //Si todo está correcto, llamaremos a la función "GuardarDisco()". A la cuál tendremos que pasarle el objeto Disco, ¿no?
    }else{
        //Cancelar el evento por defecto del envío del formulario.
        evento.preventDefault();
        return false;
    }
}


//----------------------------------------------------------//
//Funcion 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;
        //console.log(nombre);
        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();
        //console.log(cantante);
        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;
        //console.log(estanteria);
    }else{
        document.getElementById("errores").innerHTML="El campo ESTANTERIA es obligatorio.";
        document.getElementById("estanteria").focus();
        return false;
    }
}

solución

var nombre = document.getElementById("inputNombre").value;    
var cantante = document.getElementById("inputCantante").value;
var ano = document.getElementById("inputAno").value;
var tipo = document.getElementById("inputTipo").value;
var estanteria = document.getElementById("inputEstanteria").value;
var disco = new Disco(nombre,cantante,ano,tipo,estanteria);

En el caso de un radio button sería así:

var radioButtons= document.getElementsByName('nombreRadio');
var radio;

for (var i = 0, i < radioButtons.length; i++) {
    //Así cogemos el valor del radio que esté checked
    if (radioButtons[i].checked) {
        radio = radioButtons[i].value;
        break;
    }
}

Así tendrías el objeto disco con los datos de los input y solo quedaría añadirlo con addDisco.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *