Uma das coisas básicas em termos de programação para web é fazer um formulário em que você envia os dados para uma página que recebe os mesmos e insere (ou atualiza) uma tabela no banco de dados.
Vou mostrar abaixo como fazer isso de uma forma mais bacana, por ajax (sem precisar dar submit mesmo no form) com a ajuda da prototype (seguindo a série de posts), e totalmente acessíve. (se o usuário estiver num browser com o javascript desabilitado, funcionará corretamente, da forma tradicional).
Como falei, usaremos a prototype. Mais especificamente, o método request() da classe Form. Esse método serializa os dados do formulário e faz o request usando o método request() da classe Ajax da própria prototype, usando a action do form como url.
Obs.: O que é serializar os dados do form? O método percorre todos os elementos de dados de um formulário (inputs, selects, textareas…) e monta uma string no formato [nome do primeiro elemento]=[valor do primeiro elemento]&[nome do segundo elemento]=[valor do segundo elemento]&..&[nome do último elemento]=[valor do último elemento]
Mais sobre a serialização: http://www.prototypejs.org/api/form/serialize
No exemplo abaixo, ao clicar no botão submit do form, a função javascript é chamada. Essa função recebe o próprio form como parâmetro, e já chamo diretamente o método request() que faz o request para edit.php
No retorno da função (chamado de callback) eu verifico o que é retornado por esse edit.php
Nele, eu defini que se der algum erro será jogado o valor -1, e em caso de sucesso, 1 (e, nesse caso, chamo o método reset() que apaga todos os dados preenchidos no formulário, deixando-o pronto para uma nova inserção)
Código funciona html + javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo Prototype - form</title>
<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function submitForm(form) {
/*
usa método request() da classe Form da prototype, que serializa os campos
do formulário e submete (por POST como default) para a action especificada no form
*/
form.request({
onComplete: function(transport){
/*
se o retorno for diferente de -1, entende-se que não houve problemas, então apaga-se
os campos do formulário usando o método reset() da classe Form
*/
if(transport.responseText!=-1)
form.reset();
}
});
return false;
}
</script>
</head>
<body>
<h1>Submeter form com prototype</h1>
<form id="edit" name="edit" action="edit.php" onsubmit="submitForm(this); return false;">
<label for="name">nome:</label><input type="text" name="name" id="name" />
<label for="desc">descrição:</label><input type="text" name="desc" id="desc" />
<label for="quant">quantidade:</label><input type="text" name="quant" id="quant" />
<input type="submit" value="salvar" />
</form>
</body>
</html>
Segue abaixo também o código da página edit.php; vale lembrar que independe se é um php ou asp ou qualquer outra coisa. Conforme já comentei nesse post aqui a linguagem usada no server-side não tem impacto algum na implementação javascript – devem ser implementações totalmente desacopladas (até porque uma é server-side, e outra client-side).
<?php
$bdConnection = mysql_connect("localhost", "root", "");
mysql_select_db("exemplos_andafter");
$sql = "INSERT INTO `produtos` (`name`, `desc`, `quant`) VALUES(´" . $_POST["name"] . "´, ´" . $_POST["desc"] . "´, ´" . $_POST["quant"] . "´)";
$result = mysql_query($sql) or die("-1");
echo("1");
?>
Qualquer dúvida, comentem 🙂