Aqui fica um exemplo típico de AJAX do jQuery, e o que você precisa:
$("form").submit(function(e){
e.preventDefault();
var form_data = $(this).serialize();
var form_url = $(this).attr("action"); // ou somente teste.php no seu caso
var form_method = $(this).attr("method").toUpperCase();
$("#loadingimg").show();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false,
success: function(returnhtml){
$("#loadingimg").hide();
$("#result").html(returnhtml);
}
});
});
A primeira parte deste código não tem ainda a ver com o ajax. É um "event handler" que intercepta o momento/evento em que a form é submetida.
O código e.preventDefault();
pára essa ação. O e
é o objeto-evento que vai ser parado, ou seja a página não vai recarregar.
As linhas que se seguem são para preparar respectivamente os dados a enviar, o url do lado do servidor, o tipo de método (tipicamente POST ou GET).
A linha $("#loadingimg").show();
é opcional e é para o caso de ter uma imagem, ou texto que queira mostrar enquanto a ligação é feita so para o utilizador saber que está a haver processamento no servidor.
Com a chamada deste método $.ajax({
começa a parte do AJAX.
O ajax é exatamnente para carregar conteudo do servidor sem ter de fazer refresh à página. Aqui os parametros defenidos em variáveis em cima vão ser usados.
A parte talvez mais importante, é success: function(returnhtml){
. Aqui é a chamada callback. A função que corre quando o pedido AJAX recebe dados de volta do servidor. O html é passado na variável returnhtml
.
Neste exemplo, a primeira linha esconde a imagem que estava a mostrar durante o pedido. A segunda linha é o que você procura, ou seja $("#result").html(returnhtml);
que vai inserir o novo conteudo no elemento DOM com a ID result