Trigger do evento submit fora do formulário sem a necessidade de javascript

Já precisou construir um formulário e o botão de submit ficava fora do elemento <form>, ai bateu a dúvida de como fazer o trigger do evento?

Existe uma forma nativa no html pra lidar com isso, o atributo form da tag <button>.

O tributo form espeficica o formulário ao qual o botão pertence. O valor para essa propriedade tem que ser igual ao id do elemento <form> em questão e estar no mesmo documento .html.

No exemplo abaixo, mostro um counter, onde ao submit do form, o valor do input é somado ao estado do counter.

    <div>
      <button form="form">submit</button>
      <button type="reset" form="form">reset</button>
      <form id="form">
        <input
          type="number"
          name="my-first-input"
          placeholder="my first input"
        />
      </form>
    </div>
    <span id="display">0</span>

      const display = document.querySelector("#display");
      const input = document.querySelector("input[name='my-first-input'");
      const reset = document.querySelector("button[type='reset']");

      const form = document.querySelector("form");
      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const { value } = input;

        display.innerHTML = Number(display.innerHTML || 0) + Number(value);
      });

      reset.addEventListener("click", () => {
        display.innerHTML = 0;
      });

preview

Se quiser testar e editar tu mesmo, da uma olhada nesse exemplo:

https://codesandbox.io/s/cold-butterfly-6ncnvr?file=/index.html:115-295

Conclusão

Nem sempre precisamos utilizar javascript para realizar algumas tarefaz de manipulação do html, as vezes já existe alternativas nativas do html que vão te poupar código e tempo.

Foi útil pra ti? sinta-se livre pra me seguir no Twitter

Blog

Trigger do evento submit fora do formulário sem a necessidade de javascript

Gustavo Leite

Conclusão

Join Our Newsletter. No Spam, Only the good stuff.

Related