Como enviar um formulário usando JavaScript

JavaScript é uma linguagem de programação da web de alto nível que está se tornando popular dia a dia. Ele fornece às nossas páginas da web e aplicativos da web a capacidade de executar determinadas ações e torná -las interativas. O JavaScript oferece formulários para desenvolvedores da Web que ajudam os desenvolvedores a coletar dados de usuários e armazenar esses dados em um banco de dados. Ao trabalhar com vários aplicativos e sites, o envio de formulário é um fenômeno crítico.

Neste post, examinaremos como enviar um formulário usando JavaScript em detalhes, mas primeiro, veremos como criar um formulário HTML.

Criação de forma HTML

Um formulário HTML pode ser criado usando a tag que é oferecida pelo próprio HTML e leva dois atributos:

• O primeiro é a "ação" que contém um URL (que lida com o envio do processo de formulário).
• O segundo atributo é o "método" que possui um método HTTP.

Um método HTTP pode ser de vários tipos e os dois mais usados ​​são:

• Get (usado para obter alguns dados de um servidor)
• Publicar (usado para escrever dados no servidor)

No entanto, não usaremos esses dois atributos neste post, pois não estamos trabalhando com um servidor.

Vamos agora escrever código HTML para criação de formulários:

Enviar

No código acima, criamos um formulário e demos o eu ia atribuir à forma cujo significado veremos há algum tempo. Em seguida, definimos dois campos de entrada e depois definimos um botão que possui um tipo de enviar. No final, colocamos um roteiro tag e referenciou o nome do arquivo “código.JS”Isso conterá nosso código JavaScript.

Formulário de acesso e recupere valores do formulário

Agora que terminamos de criar nosso formulário, vamos acessar este formulário a partir de JavaScript e depois recuperar os valores de nome de usuário e senha que estão presentes dentro da tag de formulário. Para acessar o formulário, usaremos o eu ia Atributo mencionado anteriormente através do seguinte código:

var myform = documento.getElementById ('myform');

Da mesma maneira, também podemos obter os valores dos campos de entrada usando o eu ia atributo fornecido no formulário HTML. A única diferença é que daremos o valor no final do getElementById para que possamos recuperar o valor do campo de entrada e não o próprio elemento:

VAR Nome de usuário = documento.getElementById ('nome de usuário').valor;
var senha = documento.getElementById ('senha').valor;

Enviar formulário e validar dados

Para enviar o formulário, usaremos o ouvinte de eventos que ouve um ouvinte especificado continuamente. Um evento é simplesmente uma interação de HTML e JavaScript desencadeada por um usuário ou navegador quando o usuário manipula uma página e este evento é tratado pelo ouvinte do evento.

var myform = documento.getElementById ('myform');
// ouvinte de eventos que ouve o evento de envio
myform.addEventListener ("submeter", função (e)
e.prevenvDefault ();
// recuperar valores
VAR Nome de usuário = documento.getElementById ('nome de usuário').valor;
var senha = documento.getElementById ('senha').valor;
// validar campos de nome de usuário e senha
if (nome de usuário == "|| senha ==")
alerta ("Por favor, preencha todos os campos necessários");

outro
alerta ("submissão de formulário bem -sucedida");

)

No código acima, primeiro, obtemos a referência do formulário usando o eu ia atribuir e iniciar um ouvinte de evento de "enviar" neste formulário. A função especificada no ouvinte será invocada assim que o usuário clicar no botão Enviar.

Dentro da função, realizamos nossa validação, ou seja, se os campos de entrada de nome de usuário ou senha estiverem vazios, veremos uma mensagem na caixa de alerta dizendo Por favor, preencha todos os campos obrigatórios Caso contrário, receberemos a mensagem de Envio de formulário bem -sucedido.

Vamos verificar primeiro clicando no botão Enviar, deixando os dois campos de entrada vazios:

Vamos agora preencher os dois campos e ver a saída:

Conclusão

Os formulários são muito úteis para coletar dados dos usuários e depois manipular ou brincar com esses dados em JavaScript. Neste post, tomamos ajuda de um html tag para inicializar um formulário e depois definiu dois campos de entrada e um botão. Em seguida, acessamos o elemento de formulário dentro de um arquivo JavaScript e depois recuperamos os valores dos campos de entrada de formulário usando o eu ia atributo.

No final, respondemos a pergunta de como enviar um formulário usando JavaScript, iniciando um ouvinte de evento que ouvirá o evento de envio e sempre que um usuário clicar no botão Enviar, este evento será disparado. Também validamos nossos campos de entrada dentro da função do ouvinte do evento.