Implementar un botón para desactivar todo un formulario

Hola que tal. Estoy aqui para encontrar algo de ayuda con botón desactivar.

Tengo un formulario, el cual posee algunos datos, los cuales guardo en una base de datos. Luego, en otro formulario, los muestro en una vista, este formulario que recibe los datos provenientes de la bd posee 3 botones, editar cerrar e inactivar.

Necesito que los datos que se muestran en la vista se queden ahí, sin poder cambiarlos o simplemente que no se vean, al momento de darle click al boton inactivar.

He visto algunas cosas en Internet pero nada se asemeja a lo que nesecito hacer. Si alguien tiene alguna idea de como empezar sería de utilidad. De antemano, muchas gracias.

Editar

Responder la pregunta

nelson

4 2

Respuestas

No existe una manera directa con Javascript para desactivar todo un formulario. Tendrías que ir campo a campo haciendo que estén desactivados, uno a uno. Obviamente puedes crearte un array de identificadores de todos los campos que se necesitan desactivar, y recorrer con un array todos ellos, realizando la operativa programáticamente por medio de una repetición.

Supongo que no tendría mucha dificultad de implementar. Te pongo un código para que lo tengas como referencia y puedas partir de él para crear tu propio formulario personalizado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Desactivar formulario</title>
</head>
<body>
  
  <form action="#">
    Nombre: <input type="text" name="nombre" id="nombre">
    <br>
    Apellidos: <input type="text" name="apellidos" id="apellidos">
    <br>
    Teléfono: <input type="text" name="telf" id="telf">
    <br>

  </form>

  <button id="activar">Activar</button>
  <button id="desactivar">Desactivar</button>

  <script>
  var activarButton = document.getElementById('activar');
  var desactivarButton = document.getElementById('desactivar');

  var idsCampos = ['nombre', 'apellidos', 'telf'];

  activarButton.addEventListener('click', function() {
    idsCampos.forEach( function (idCampo) {
      elem = document.getElementById(idCampo);
      elem.disabled = false;
    });
  });

  desactivarButton.addEventListener('click', function() {
    idsCampos.forEach( function (idCampo) {
      elem = document.getElementById(idCampo);
      elem.disabled = true;
    });
  });

  </script>
</body>
</html>

Puedes observar los botones, que permiten activar y desactivar los campos de formulario.

El código seguramente lo puedas refactorizar un poco, ya que la parte de desactivar y activar los campos es básicamente el mismo código con un true o un false de diferencia.

Alba

355 9 25 13

Hola Nelson, aquí un truco que suelo usar yo justo para lo que tú comentas, desactivar un formulario completamente con Javascript.

La idea es que la etiqueta <form> no se puede desactivar por defecto... Pero existe la etiqueta <fieldset> que sí que se puede desactivar, acepta el atributo "disabled".

Por defecto, cuando el atributo "disabled" está presente, todos los campos dentro del fieldset quedan inactivos: se ven los valores pero no se pueden modificar.

Te dejo un ejemplo muy claro, puedes probarlo en un navegador: introducir valores en los campos y después pobrar a desactivar todo el formulario.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Inactivar</title>
  </head>

  <body>
    <button id="enable">Activar Formulario</button>
    <button id="disable">Desactivar Formulario</button>

    <form action="#">
      <fieldset id="fieldset">
        <label for="name">
          Nombre y apellidos:
          <input type="text" id="name" />
        </label>
        <br />
        <label for="age">
          Edad:
          <input type="number" id="age" />
        </label>
        <br />
        <label for="email">
          Email:
          <input type="email" id="email" />
        </label>
      </fieldset>
    </form>

    <script>
      const enableForm = document.getElementById("enable");
      const disableForm = document.getElementById("disable");
      const fieldset = document.getElementById("fieldset");

      enableForm.addEventListener("click", () => (fieldset.disabled = false));
      disableForm.addEventListener("click", () => (fieldset.disabled = true));
    </script>
  </body>
</html>

Además, por defecto casi todos los navegadores aplicarán un estilo de desactivado a todos los campos (borde y texto grises), sin que tengas que ocuparte tú de hacerlo.

Espero que quede bastante claro, si hay alguna duda avisa!

Rubén

20 1 2

Aportar una respuesta