Este artigo amplia uma dúvida de um usuário de CriarWeb.com. A pergunta em concreto que nos realizou o usuário era como fazer um formulário que, ao envia-lo, nos pergunte se realmente se deseja enviar.
A pergunta em concreto era a seguinte:
Estou fazendo um formulário e desejo que, ao envia-lo, me mostre uma janela de confirmação de envio do formulário, dessas que têm um botão de aceitar e outro de cancelar. Então, se se aceita o envio, se enviaria o formulário.... se não se aceita, o formulário não seja enviado.
Resposta
Isto tem muito a ver com o tema de tratamento de formulários. A resposta baseia sua maior técnica no fato de substituir o botão de submit por um botão normal. Com o botão normal não se envia o formulário diretamente e sim, chama a uma função que realiza a confirmação e, no caso positivo, envia o formulário.
O botão que colocaríamos no formulário em substituição do botão de submit seria o seguinte:
<input type=button onclick="pergunta()" value="Enviar">
Observemos que o botão tem definida uma ação no momento em que se clica. A ação em concreto faz com que se execute a função pergunta(), que será a que realize a confirmação e envie o formulário no caso positivo. Seu código pode ser visto a seguir.
<script language="JavaScript">
function pergunta(){
if (confirm('Tem certeza que quer enviar este formulário?')){
document.seuformulario.submit()
}
}
</script>
A caixa confirm devolve true ou false dependendo de se se clica o botão de aceitar ou cancelar. Esse valor se utiliza em um enunciado if para decidir se se envia o formulário, com seu método submit(), ou não se faz nada.
O código completo de uma página que realiza esta tarefa em um formulário é o seguinte:
<html>
<head>
<title>Confirmação de envio de formulário</title>
<script language="JavaScript">
function pergunta(){
if (confirm('Tem certeza que quer enviar este formulário?')){
document.seuformulario.submit()
}
}
</script>
</head>
<body>
<form name=tuformulario action="http://www.criarweb.com">
<input type="text" name="qualquercampo">
<input type=button onclick="pergunta()" value="Enviar">
</form>
</body>
</html>
Pode-se ver o exercício em funcionamento aqui.
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em 
