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
Top comments (0)