Como enviar um formulário via JavaScript « Paulo de Souza | XHTML, HTML 5, CSS, Python, Django, Flash, RoR

Trabalho

Como enviar um formulário via JavaScript

14 de novembro, 2009

As vezes é necessário desenvolver uma validação para certos campos de um formulário, e para isso é preciso de uma verificação por parte do JavaScript antes do envio.

Veremos neste post como desenvolver o algoritmo para a realização desta tarefa…

1 – Antes de tudo, crie um arquivo “.html” (ex: index.html) e adicione o seguinte código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">

<head>
<title>Enviando formulário via JavaScript</title>
<script src="validaForm.js" type="text/javascript"></script>
</head>

<body>
<div id="aviso"></div>

<form name="formulario" onsubmit="return enviarForm();" method="post">
<p>
<label>
<small>Nome (obrigatório)</small>
</label>
<input type="text" name="nome" maxlenght="50" />
</p>
<input type="submit" value="Enviar" />
</form>

</body>
</html>

Explicando…

É chamado no cabeçalho, o arquivo responsável por conferir o formulário (faremos em seguida), e no corpo da página é inserido o form com nome “formulario”, função “onsubmit=’return enviaForm();’” (responsável por chamar a função “enviaForm()” quando submetido o formulário).

Dentro do formulário, é adicionado um campo de texto com name igual a “nome” e com maxlenght (total de caracteres) igual a 50. Logo em baixo o botão submit.

2 - Agora vamos ao JavaScript, crie um arquivo com nome “validaForm.js” e insira o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Explicando…

A função “enviaForm(){}” é chamada quando o formulário é submetido.

Dentro da função existe a variável “nome” (responsável por receber o valor do campo “nome”), logo abaixo uma condição que verifica se o usuário não preencheu o campo, caso não tenha preenchido é inserido dentro da div de id “aviso” o comentário “Faltou preencher!”, além de alterar a cor do fundo do campo para amarelo.

Caso o usuário tenha preenchido o campo, é informado a action (no caso a url) e logo é chamado a função submit que irá enviar os dados para a url especificada.

Bom, é isso aí, vou tentar toda semana postar ~~pelo menos~~ um artigo, até mais!