0

Tengo que crear socios (objetos) a través de los datos que ingreso en un formulario y el problema es que no entiendo bien como hacerlo.

Si en vez de formulario utilizo prompt sí que creo el objeto, pero no entiendo si lo estoy haciendo mal con el formulario o si me falta algo para crear el socio.

function Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password){
this.nombre = "";
this.apellido1 = "";
this.apellido2 = "";
this.dni = "";
this.localidad= "";    
this.fecNacimiento="";
this.password = "";

this.numero = function(){
    if  (usuarios.length!==-1){
        return usuarios.length+1;
    }
}

this.info = function () {
    return (this.nombre + " || " + this.apellido + " || " + this.dni+ '<br>');
};

this.socio = function (nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password) {
    this.nombre = nombre;
    this.apellido1 = apellido1;
    this.apellido2 = apellido2;
    this.dni = dni;
    this.localidad= localidad;    
    this.fecNacimiento= fecNacimiento;
    this.password = password;
}

this.socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password);

}

var nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password;
var socio=new Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password);

var arraySocios = [];

window.addEventListener('load', iniciar);

function iniciar() {
document.getElementById("usuarios").addEventListener('click',formulario);   
document.getElementById('enviar').addEventListener('click', addSocio); 
document.getElementById("nombre").addEventListener('blur', campo20);
document.getElementById("apellido1").addEventListener('blur', campo20);
													  
}


function formulario(){
document.getElementById('cuerpo').innerHTML='<div id="formulario">'+'<form action="index.html" id="formSocio" method="get"><br>'+											'<label for="name">Nombre</label><input type="text" id="nombre" name="nombre"><br>'+
	'<label for="apellido1">Primer apellido</label><input type="text" id="apellido1" name="apellido1"><br>'+
	'<label for="apellido2">Segundo apellido</label><input type="text" id="apellido2" name="apellido2"><br>'+
	'<label for="dni">Dni</label><input type="text" id="dni" name="dni"><br>'+
	'<label for="fechaNacimiento">Fecha de nacimiento</label><input type="date" id="fecNacimiento" name="fecNacimiento"><br>'+
	'<label for="localidad">Localidad de residencia</label><input type="text" id="localidad" name="localidad"><br>'+
	'<label for="password">Contrasena</label><input type="password" id="password" name="password"><br>'+
	'<input type="submit" id="enviar" name="enviar" value="enviar">'+
	'</form>'+
	'</div>';		

}	

function campo20(event) {
if (event.target.value.length >= 1 && event.target.value.length <= 20) {
    event.target.style.borderColor = "green";
    return true;
} else {
    event.target.style.borderColor = "red";
    return false;
}
}


function addSocio(event){
event.preventDefault();
if (campo20(event) === true ) {
    alert("Datos validados y enviados");
       nombre = document.getElementById("nombre").value;
        apellido1 = document.getElementById("apellido1").value;
        apellido2 = document.getElementById("apellido2").value;
        dni = document.getElementById("dni").value;
        fecNacimiento = document.getElementById("fecNacimiento").value;
        localidad = document.getElementById("localidad").value;
        password = document.getElementById("password").value;

        arraySocios.push(socio);
        
        console.log(arraySocios.length);
        console.log(socio.nombre);
    alert(socio.nombre);
        for(var unSocio in arraySocios){
            alert(arraySocios[unSocio].nombre+" "+arraySocios[unSocio].apellido1);
            console.log[arraySocios[unSocio].info];
        }
    return true;
} else {
    alert("Datos incorrectos");
    return false;
} 
}
<html>

    <head>
        <title>TODO supply a title</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">



        <script type="text/javascript" src="js/2tr/parte1.js"></script>
		
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
       
            <nav id="navbar">
              <ul>
                <li><a href="#">inicio</a></li>
                <li onClick="showas()"><a href="#" >utilidades</a></li>
                <li id="usuarios"><a href="#">usuarios</a></li>
                <li><a href="#">enlace3</a></li>
                <li><a href="#">enlace4</a></li>
              </ul>
            </nav>
        </header>

        <div class="todo">
            <aside id="asleft"></aside>
         		<div id="formulario">
        <form action="index.html" id="formSocio" method="get"><br>											
            <label for="name">Nombre</label><input type="text" id="nombre" name="nombre"><br>
            <label for="apellido1">Primer apellido</label><input type="text" id="apellido1" name="apellido1"><br>
            <label for="apellido2">Segundo apellido</label><input type="text" id="apellido2" name="apellido2"><br>
            <label for="dni">Dni</label><input type="text" id="dni" name="dni"><br>
            <label for="fechaNacimiento">Fecha de nacimiento</label><input type="date" id="fecNacimiento" name="fecNacimiento"><br>
            <label for="localidad">Localidad de residencia</label><input type="text" id="localidad" name="localidad"><br>
            <label for="password">Contrasena</label><input type="password" id="password" name="password"><br>
            <input type="submit" id="enviar" name="enviar" value="enviar">
        </form>
        </div>

            <section id="cuerpo"></section>

            
            <aside id="asright"></aside>
        </div>
  
    </body>
</html>

2
  • Las variables usuarios y user no estan definidas.
    – alanfcm
    el 6 mar. 2019 a las 0:02
  • tienes razon, se me habian colado, ya lo edité,aún así, el problema persiste
    – cisco
    el 6 mar. 2019 a las 0:14

1 respuesta 1

0

Las "clases" de Javascript escritas de esa manera, tienen que ser inicializadas. Una manera de hacerlo seria asi:

function Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password){
    this.nombre = "";
    this.apellido1 = "";
    this.apellido2 = "";
    this.dni = "";
    this.localidad= "";    
    this.fecNacimiento="";
    this.password = "";

    this.numero = function(){
        if  (usuarios.length!==-1){
            return usuarios.length+1;
        }
    }

    this.info = function () {
        return (this.nombre + " || " + this.apellido + " || " + this.dni+ '<br>');
    };

    this.socio = function (nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password) {
        this.nombre = nombre;
        this.apellido1 = apellido1;
        this.apellido2 = apellido2;
        this.dni = dni;
        this.localidad= localidad;    
        this.fecNacimiento= fecNacimiento;
        this.password = password;
    }

    this.socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password);

}

En la función de addSocio:

function addSocio(event){
    event.preventDefault();
    if (campo20(event) === true ) {
        alert("Datos validados y enviados");
            let nombre = document.getElementById("nombre").value;
            let apellido1 = document.getElementById("apellido1").value;
            let apellido2 = document.getElementById("apellido2").value;
            let dni = document.getElementById("dni").value;
            let fecNacimiento = document.getElementById("fecNacimiento").value;
            let localidad = document.getElementById("localidad").value;
            let password = document.getElementById("password").value;

            let socio = new Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad,password);


            arraySocios.push(socio);

            console.log(arraySocios.length);
            console.log(socio.nombre);
        alert(socio.nombre);
            for(var unSocio in arraySocios){
                alert(arraySocios[unSocio].nombre+" "+arraySocios[unSocio].apellido1);
                console.log[arraySocios[unSocio].info];
            }
        return true;
    } else {
        alert("Datos incorrectos");
        return false;
    } 
}
5
  • si no entiendo mal, ¿tengo que iniciarla para poder crear el objeto y asi pasarle los datos del formulario? ¿pero como paso los datos? (edito el codigo javscript y el html ya que si pongo el formulario en el html (solucion temporal) parece que algo funciona, aunque los campos los envia vacios, o no me los muestra)
    – cisco
    el 6 mar. 2019 a las 11:03
  • Cuando creas una clase en JS mediante una función, esta no funciona como las clases que podemos ver en otros lenguajes, tienes que iniciar los valores, esto se puede hacer de varias formas. En el caso que te puse yo, llamo a una función "constructora" que he creado dentro de la clase. Para asignar los valores, me imagino que querras en la parte donde haces click en enviar, te edito la respuesta con ello. el 6 mar. 2019 a las 11:24
  • a ver si entiendo bien, al utilizar let , estamos asignando los valores cuando estamos en el if, de ahi se pasaría a crear el objeto que se introduce en el array y se guarda, mientras que antes, al ser con var, me guardaba los datos en las variables declaradas como global y no las guardaba en el objeto? puede ser algo así?...como se ve aun estoy aprenidendo js y trato de entender el codigo, y gracias por la respuesta
    – cisco
    el 6 mar. 2019 a las 11:38
  • let dicho de manera vulgar, es básicamente var. Al usar let nos aseguramos de que si declaramos una variable dentro del if, esa variable sea solamente existente en el if, incluso si fuera del if tenemos una variable declarada con el mismo nombre. Puedes cambiar let por var sin problemas, es solamente que estoy acostumbrado de esa manera y lo he puesto asi. el 6 mar. 2019 a las 11:44
  • ok entiendo, gracias por la respuesta y la explicacion
    – cisco
    el 6 mar. 2019 a las 12:15

Tu Respuesta

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

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