0

Tengo que reutilizar un formulario en tres funciones que harán cosas diferentes, en la primera utilizaré todos los campos del formulario, en la segunda algunos campos tendran que estar como readOnly, y la tercera mostrará en los campos el valor de cada atributo del objeto y estarán todos como readOnly y no se como hacerlo, probé con if else, y no fui capaz y ahora lo modifiqué para dejar un switch que parece mas limpio pero tampoco logro llamar a las funciones.

He resuelto el hacer los campos readOnly pero no se como fjar los valores en los input una vez que estan readOnly.

el codigo es el siguiente:

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

  this.numero = "";

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

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

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


}

//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', botones);


}

//botones para llamar alta, modificar, baja usuarios.
function botones() {

  document.getElementById('cuerpo').innerHTML = '<div class="botones">' +
    '<form id="opcionesBoton" action="index.html" method="get">' +
    '<input type="submit" name="alta" id="alta" class="opcion" value="alta">' +
    '<input type="submit" name="modificar" id="modificar" class="opcion" value="modificar">' +
    '<input type="submit" name="baja" id="baja" class="opcion" value="baja">' +
    '</form>' +
    '</div>';

  document.getElementById('alta').addEventListener('click', validaBotones);
  document.getElementById('modificar').addEventListener('click', validaBotones);
  document.getElementById('baja').addEventListener('click', validaBotones);

}

function validaBotones() {

  var opcion = event.target.value;
  switch (opcion) {
    case 'alta':
      alert('1');
      formulario();
      document.getElementById("formulario").addEventListener('click', alta);
      return true;
      break;
    case 'modificar':
      alert('2');
      formulario();
      document.getElementById("formulario").addEventListener('click', modificarDatos);
      return true;
      break;
    case 'baja':
      alert('3');
      formulario();
      document.getElementById("formulario").addEventListener('click', baja);
      return true;
      break;
  };
}


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">' +
    '<input type="reset" id="limpiar" value="limpiar">' +
    '</form>' +
    '</div>';


  document.getElementById("nombre").addEventListener('blur', campo20);
  document.getElementById("apellido1").addEventListener('blur', campo20);
  document.getElementById("enviar").addEventListener('click', alta);

}

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 alta(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 numero = (100 + arraySocios.length);
    let socio = new Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad, password, numero);

    arraySocios.push(socio);

    console.log(arraySocios.length);
    console.log(socio.nombre);
    alert(socio.nombre);
    for (var unSocio in arraySocios) {
      alert("Socio: " + arraySocios[unSocio].numero + " Nombre: " + arraySocios[unSocio].nombre + " Apellido: " + arraySocios[unSocio].apellido1);
      console.log[arraySocios[unSocio].info];
    }
    return true;
  } else {
    alert("Datos incorrectos");
    return false;
  }
}
//modificarDatos
function modificarDatos() {
  event.preventDefault();
  let nombre = document.getElementById("nombre").value;
  let apellido1 = document.getElementById("apellido1").value;
  let apellido2 = document.getElementById("apellido2").value;
  let dni = document.getElementById("dni").readOnly = true;
  document.getElementById("dni").style.backgroundColor = 'grey';
  let fecNacimiento = document.getElementById("fecNacimiento").readOnly = true;
  document.getElementById("dni").style.backgroundColor = 'grey';
  let localidad = document.getElementById("localidad").value;
  let password = document.getElementById("password").value;
  let numero = (100 + arraySocios.length);
  let socio = new Socio(nombre, apellido1, apellido2, dni, fecNacimiento, localidad, password, numero);

}
//dar baja usuario
function baja() {
  event.preventDefault();
  let nombre = document.getElementById("nombre").readOnly = true;
  let apellido1 = document.getElementById("apellido1").readOnly = true;
  let apellido2 = document.getElementById("apellido2").readOnly = true;
  let dni = document.getElementById("dni").readOnly = true;
  let fecNacimiento = document.getElementById("fecNacimiento").readOnly = true;
  let localidad = document.getElementById("localidad").readOnly = true;
  let password = document.getElementById("password").readOnly = true;
}
<html>

<head></head>

<body>
  <header>

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

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


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

</body>

</html>

4
  • En donde llamas a la funcion formulario()?
    – alanfcm
    el 6 mar. 2019 a las 22:07
  • tienes razon, acabo de editar, llamo a formulario en el case, en teoria una vez que clickas en uno de los botones, modificar alta o baja. pero sigo sin ser capaz de hacer que funcione
    – cisco
    el 6 mar. 2019 a las 22:27
  • es que no estas escuchando el evento..fijate que en la funcion botones(event)..recibes como parametro el event pero no lo envias... el 6 mar. 2019 a las 22:29
  • @DiegoAvila es que no entiendo muy bien estas funciones, es la primera vez que trabajo con ellas y como has visto hago un uso inadecuado, he quitado el event como parametro y así consigo que me funcione, ¿hacerlo así sería solo un parche para que funcione o seria una practica normal?
    – cisco
    el 7 mar. 2019 a las 10:32

1 respuesta 1

0

Para poder usar event.target.etc tenes que llamar a la función enviándole el parámetro así onclick='miFunc(event)' y declarar la funcion así function miFunc(elNombreDeVariableQueQuieras). En la función alta el event.target sería el botón #enviar y cuando desde adentro de la misma función llamás a campo20(event), en esa función event.target seguiría siendo el botón #enviar y estarías comprobando si "enviar" tiene mas de una y menos que 20 letras. Además le estás asignando un eventListener al contenedor del formulario en document.getElementById("formulario").addEventListener('click', baja); en vez de al botón. Para que te permita modificar el valor de los input, creo que deberías hacerlo antes de agregarles el atributo readOnly, pero en el código no encuentro ningún lado en donde les estés asignando algún valor.

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.