Trabalhando com Botões em JavaScript

Para enviar dados inseridos em um formulário, utilizam-se botões. Para criar um botão, você pode usar o elemento buttons:

<button name="send">Enviar</button>

Ou o elemento input:

<input type="submit" name="send" value="Enviar" />

Do ponto de vista da funcionalidade em HTML, esses elementos não são exatamente equivalentes, mas neste contexto, eles são importantes para a interação com o código JavaScript.

Ao clicar em qualquer uma dessas opções de botão, o formulário é enviado para o endereço especificado no atributo action do formulário, ou para o endereço da página web, se o atributo action não estiver definido. No entanto, no código JavaScript, podemos interceptar esse envio, tratando o evento de clique.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <form name="search">
      <input type="text" name="key" />
      <input type="submit" name="send" value="Enviar" />
    </form>
    <script>
      function sendForm(e) {
        // Obtemos o valor do campo key
        const keyBox = document.search.key;
        const val = keyBox.value;
        if (val.length < 3) {
          alert("Comprimento da string inaceitável");
          e.preventDefault();
        } else alert("Envio permitido");
      }

      const sendButton = document.search.send;
      sendButton.addEventListener("click", sendForm);
    </script>
  </body>
</html>

Ao pressionar o botão, dispara o evento de clique, e para tratá-lo, anexamos o manipulador sendForm. Este manipulador verifica o texto inserido no campo de texto. Se o comprimento do texto for menor que 3 caracteres, uma mensagem sobre a inadequação do comprimento é exibida e o fluxo normal do evento é interrompido com a chamada de e.preventDefault(). Como resultado, o formulário não é enviado.

Se o comprimento do texto for três ou mais caracteres, uma mensagem é exibida e, em seguida, o formulário é enviado.

Envio de formulário em JavaScript

Também podemos, se necessário, alterar o endereço para o qual os dados são enviados durante o envio:

function sendForm(e) {
  // Obtemos o valor do campo key
  const keyBox = document.search.key;
  const val = keyBox.value;
  if (val.length > 3) {
    alert("Comprimento da string inaceitável");
    document.search.action = "PostForm";
  } else alert("Envio permitido");
}

Neste caso, se o comprimento do texto for menor que 3 caracteres, o texto é enviado, mas agora ele é enviado para o endereço PostForm, pois a propriedade action foi definida como:

document.search.action = "PostForm";

Limpeza do formulário

Para limpar o formulário, você pode usar os seguintes botões:

<button type="reset">Limpar</button> <input type="reset" value="Limpar" />

Ao pressionar esses botões, os formulários serão limpos. No entanto, a funcionalidade de limpeza dos campos do formulário também pode ser implementada usando o método reset():

function sendForm(e) {
  // Obtemos o valor do campo key
  const keyBox = document.search.key;
  const val = keyBox.value;
  if (val.length < 3) {
    alert("Comprimento da string inaceitável");
    document.search.reset();
    e.preventDefault();
  } else alert("Envio permitido");
}

Além dos botões especiais de envio e limpeza, um botão comum também pode ser usado no formulário:

<input type="button" name="send" value="Enviar" />

Ao pressionar esse tipo de botão, não dispara o envio de dados, embora também seja disparado o evento de clique:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <form name="search">
      <input type="text" name="key" placeholder="Digite a chave" />
      <input type="button" name="print" value="Imprimir" />
    </form>
    <div id="printBlock"></div>
    <script>
      function printForm(e) {
        // Obtemos o valor do campo key
        const keyBox = document.search.key;
        const val = keyBox.value;
        // Obtemos o elemento printBlock
        const printBlock = document.getElementById("printBlock");
        // Criamos um novo parágrafo
        const pElement = document.createElement("p");
        // Definimos o texto do parágrafo
        pElement.textContent = val;
        // Adicionamos o parágrafo ao printBlock
        printBlock.appendChild(pElement);
      }

      const printButton = document.search.print;
      printButton.addEventListener("click", printForm);
    </script>
  </body>
</html>

Ao pressionar o botão, obtemos o texto inserido no campo de texto, criamos um novo elemento de parágrafo para esse texto e adicionamos o parágrafo ao elemento printBlock.

Tratando cliques de um botão em JavaScript