Várias maneiras de se enviar um formulário

[klonder 14]

Ae galera! Tudo bem?!

 

Bom, resolvi postar esse pequeno tutorial para ajudar principalmente o pessoal que está iniciando no Java Script e ainda tem algumas dúvidas sobre como enviar (submeter) seus formulários. Normalmente, submeter um formulário sem validá-lo não tem segredo algum: você utiliza apenas um botão do tipo (type) "submit", define o método (method) em GET ou POST e determina (em action) a página que receberá os dados. No entanto, muitas pessoas poderão querer verificar e validar tudo o que foi digitado pelo usuário, antes de enviar o formulário, a fim de evitar entradas estranhas no Banco de Dados, por exemplo.

 

Sei que já existem vários tutoriais na net que já ensinam brilhantemente como validar formulários, pegar campos e verificar se nele existem somente números, validar CPFs, verificar se o usuário digitou 11/08/2007 e não 11-08-07, abrir uma tabela caso o usuário tenha selecionado uma determinada opção, dentre vários outros...

 

Por isso, nosso objetivo aqui hoje é apenas aprender algumas maneiras e possibilidades de se enviar um formulário, e fazer uma comparação entre elas. É justamente essa comparação que venho demonstrar, pois ainda não encontrei nada sobre esse assunto em específico na net.

 

Bem, vamos então ao assunto:

 

Você pode submeter um formulário tanto com botões type="submit" quanto type="button".

 

Vamos então mostrar como é o envio normal de um pequeno formulário com botão type="submit" e a partir desse exemplo fazer uma comparação com os demais:

 

<form name="form0" method="post" action="recebe.php">Texto: <input type=text name="texto"><input type="submit" value="OK"></form>

Exemplo 1:

Podemos utilizar um script em Java Script para verificar se o usuário digitou alguma coisa no campo "Texto" antes do formulário ser enviado, ou seja, o formulário só será enviado depois que o campo "Texto" for validado pelo Java Script. Nesse caso, precisamos definir em nosso FORM a seguinte lógica: ao submeter o formulário, verificar antes se existe conteúdo no campo Texto. Desse modo, nosso código poderia ficar da seguinte forma:

<script type="text/javascript">function enviar1(){	if(document.form1.texto.value==""){		alert("Digite o texto!");		document.form1.texto.focus();		return false;	}else{		return true;		}}</script><form name="form1" method="post" action="recebe.php" onsubmit="return enviar1();">Texto: <input type=text name="texto"><input type="submit" value="OK"></form>

Perceba que no código acima utilizamos o evento "onsubmit" dentro da tag <form>. O "return false" em onsubmit="java script:return enviar1();return false;" informa que a execução do evento deve parar, evitando que o form seja enviado. No código Java Script existe um "return true" que será chamado no momento certo, após o script ser validado.

 

 

Exemplo 2:

Bom, como eu havia comentado anteriormente, podemos, além do botão type="submit", utilizar botões do tipo "button". Nesse caso, vamos submeter o formulário através do próprio Java Script, pois o evento não está sendo mais definido por um botão submit, mas sim por outro botão simples qualquer (type="button") que necessita do evento "onclick" para funcionar:

<script type="text/javascript">function enviar3(){	if(document.form3.texto.value==""){		alert("Digite o texto!");		document.form3.texto.focus();		return false;	}else{		document.form3.submit();		}}</script><form name="form3" method="post" action="recebe.php">Texto: <input type=text name="texto"><input type="button" onclick="enviar3()" value="OK"></form>

Perceba que:

document.form3.submit();

está se encarregando de enviar o formulário.

 

Outra maneira é deixar que o código Java Script se encarregue de definir o action do formulario:

 

Exemplo 3:

Com botão type="submit":

<script type="text/javascript">function enviar2(){	if(document.form2.texto.value==""){		alert("Digite o texto!");		document.form2.texto.focus();		return false;	}else{		document.form2.action="pagina.php";		return true;		}}</script><form name="form2" method="post" action="" onsubmit="return enviar2();">Texto: <input type=text name="texto"><input type="submit" value="OK"></form>

Exemplo 4:

Com botão type="button":

<script type="text/javascript">function enviar4(){	if(document.form4.texto.value==""){		alert("Digite o texto!");		document.form4.texto.focus();		return false;	}else{		document.form4.action="admin_editor.php";		document.form4.submit();		}}</script><form name="form4" method="post" action="">Texto: <input type=text name="texto"><input type="button" onclick="enviar4()" value="OK"></form>

Conclusão:

Todos os códigos acima fazem a mesma coisa (com exceção do primeiro), que é enviar um formulário validando um determinado campo.

 

Qual o melhor código a ser usado?

Resposta: Aquele com o qual você se identificar mais. Nenhum é melhor que o outro, todos fazem a mesma coisa, de maneiras diferentes! Encontre aquele que você acha mais bonitinho, ou então use todos, para mostrar que você saca Java Script pra caramba!

 

Bom, é isso pessoal! O tutorial ficou um pouco grande, mas acho que deve ajudar alguém que tenha interesse no assunto.

 

Um grande abraço a todos!

[GuttoSP 2]

Qual o melhor código a ser usado?

Resposta: Aquele com o qual você se identificar mais. Nenhum é melhor que o outro, todos fazem a mesma coisa, de maneiras diferentes!

Nota: Os exemplos 02 e 04 são classificados como JavaScript Obstrutivo. Caso o navegador do usuário não suporte JavaScript ou o JavaScript esteja desabilitado, nada acontecerá ao clicar no botão. Para o envio de formulários sempre utilize o método onSubmit.

 

Leia mais