How to lock buttons on send form

Prevent user update form when is on submit status

by Porfirio Chavez

HTML

<form>
  <fieldset>
    <h2>
      Datos Personales
    </h2>
    <label>
      Nombre:
      <input name="nombre">
    </label>
    <label>
      Edad:
      <input name="edad">
    </label>
  </fieldset>
  <fieldset>
    <h2>
      Intereses
    </h2>
    <label>Games <input type="checkbox" /></label>
    <label>Anime <input type="checkbox" /></label>
    <label>Ramen <input type="checkbox" /></label>
  </fieldset>
  <button>
    Enviar
  </button>
  <button type="reset">
    Reset
  </button>
</form>

CSS

body {
  font-family: verdana, sans-serif;
}

fieldset {
  display: contents;
}

fieldset > * {
  display: flex;
}

input {
  margin-left: 0.5rem;
  margin-bottom: 1rem;
}

input:disabled {
  cursor: wait;
}

button {
  cursor: pointer;
  margin-top: 2rem;
  border: 1px solid gray;
  border-radius: 0.5rem;
  min-width: 10rem;
  padding: 0.5rem 1.5rem;
}

JavaScript

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Evita que se envie el formulario (por ahora)

  const fieldSets = form.querySelectorAll('fieldset');

  fieldSets.forEach(field => field.setAttribute('disabled', true));
})

form.addEventListener('reset', (event) => {
  const fieldSets = form.querySelectorAll('fieldset');

  fieldSets.forEach(field => field.removeAttribute('disabled'));
})