Como enviar um formulário clicando em um link em javascript?

Um formulário HTML pode ser enviado facilmente clicando em qualquer elemento HTML com a ajuda do JavaScript. O elemento de forma tem um enviar() método, e invocar este método com uma chamada externa enviará o formulário.

Este artigo se concentrará em enviar um formulário ao pressionar um link. Para mostrar isso, será criado um formulário que receberá os detalhes de inscrição do usuário e, após o envio do formulário, ele simplesmente imprimirá o nome do usuário no console.

Etapa 1: Configure os elementos HTML

Crie um novo documento HTML e, nesse documento, crie um formulário com um ID específico e, dentro desse formulário, crie o campo de entrada para nome de usuário e senha. Depois disso, em vez do botão enviar, crie um novo link usando o marcar e usar o atributo onclick e defini -lo igual a linkpress () função:

Digite seu nome de usuário

Digite sua senha

Link para envio

Neste ponto, este documento HTML produz a seguinte página da web:

Nossa página da web inclui dois campos de entrada e um link que possui um atributo onclick () definido para ele.

Etapa 2: Fazendo o formulário "Enviar" na Link Press

Todo elemento de formulário no HTML contém o método submit (). Para enviar um formulário, ele deve ser referenciado no JavaScript e, em seguida, o método submit () deve ser chamado usando essa referência. No arquivo de script, crie a função linkpress () e adicione a funcionalidade usando as seguintes linhas:

função linkpress ()
formulário = documento.getElementById ("forma");
forma.enviar();

A primeira linha recebe a referência da nossa tag de formulário e a armazena dentro da variável “forma”. A segunda linha usa essa referência e depois chama o envio () do formulário. A execução deste documento HTML fornece o seguinte resultado:

Pressionar o link envia o formulário, mas como não há arquivo de back -end conectado para receber o formulário, ele apenas redefine o campo.

Etapa 3: Promova o "nome de usuário" após o envio do formulário

Você quer adicionar uma função preparar() Após o carregamento completo da página da Web; Portanto, adicione a propriedade de “carregando”Na tag, como:

E então, no arquivo de script, adicione as seguintes linhas:

função pronta ()
formulário = documento.getElementById ("forma");
forma.addEventListener ("submeter", function (event)
evento.prevenvDefault ();
nome = documento.getElementById ("nome").valor;
alerta ("Welcome" + nome);
);

Quando o documento HTML está completamente carregado:

• Um ouvinte de evento é adicionado ao elemento de formulário usando sua referência.
• Este ouvinte de evento ouve o evento de envio
• Após a submissão, impede o comportamento padrão do formulário (pare o redirecionamento).
• No final, cumprimenta o usuário usando seu nome de usuário.

Se a página da web estiver carregada agora, ela fornecerá a seguinte saída:

Como você pode ver, o formulário foi enviado e, ao impedir o comportamento padrão, conseguimos evitar a necessidade de um back -end para gerenciar os dados dos campos.

Conclusão

É realmente fácil enviar um formulário clicando em um link com a ajuda do JavaScript. O elemento de formulário de um documento HTML tem esse método chamado enviar(). Para enviar o formulário, você só precisa fazer uma chamada explícita para esse método, o que fizemos neste artigo.