Enviar um formulário ao clicar um link, com Javascript
O objetivo deste artigo é enviar dados por post a uma página web utilizando Javascript. Na verdade o que vamos fazer é enviar um formulário ao clicar um link de uma página web. O formulário não se verá na página, o único que veremos é um link e ao clicar, com Javascript faremos que esse formulário se envie, com o qual se enviarão os dados do formulário por POST à página de destino do formulário.
O exemplo é simples. Requer três partes, o formulário, a função Javascript para enviá-lo e o link que se deve clicar para que se realize o envio.
O formulário com os dados a enviar por POST
O mais cômodo é que, se quisermos enviar dados por POST, criemos o formulário com os dados que se deseja enviar. O formulário terá o atributo action dirigido à página a qual queremos enviar os dados e o método de envio POST.
<form action="pagina_destino.php" method=post name="formulario1">
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="outroValor">
</form>
Como não queremos que se veja o formulário, só queremos enviar seus dados por POST, todos os campos do formulário são hidden, ou seja, ocultos.
Função Javascript para enviar um formulário
A segunda parte é uma função Javascript que executaremos para enviar o formulário. Faz uso do método submit() associado aos formulários.
<script>
function enviar_formulario(){
document.formulario1.submit()
}
</script>
Se observarmos, a função tem uma única instrução que submete o formulário. Para isso, se acessa primeiro ao formulário pelo nome que lhe demos no atributo name da etiqueta <FORM> no código HTML. O nome do formulário era "formulario1". Portanto, essa instrução faz um submit() do formulario1, que por sua vez é uma propriedade do objeto document da página.
Link para enviar os dados por POST
Agora, o objetivo do artigo é enviar dados por post ao clicar em um link. Sendo assim, simplesmente, enviando o formulário faremos chegar esses dados por post ao destino. Portanto, temos que construir um link que chame à função Javascript anterior.
<a href="javascript:enviar_formulario()">Enviar formulario</a>
Isto é muito fácil. Simplesmente se indica com javascript: que se deve executar um código javascript ao clicar o link. O código javascript é uma simples chamada à função enviar_formulario().
O código completo deste exemplo pode ser visto aqui:
<html>
<head>
<title>Enviar formulário ao clicar um link</title>
<script>
function enviar_formulario(){
document.formulario1.submit()
}
</script>
</head>
<body>
<form action="pagina_destino.php" method=post name="formulario1">
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="otroValor">
</form>
<a href="javascript:enviar_formulario()">Enviar formulario</a>
</body>
</html>
Comentários do artigo
