Here's a typical example of jQuery AJAX, and what you need:
$("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);
}
});
});
The first part of this code has not yet to do with ajax. It is an event handler that intercepts the moment / event in which the form is submitted.
The code e.preventDefault(); stops this action. The e is the object-event that will be stopped, ie the page will not reload.
The following lines are to prepare, respectively, the data to be sent, the server-side url, the type of method (typically POST or GET).
The $("#loadingimg").show(); line is optional and it is in case you have an image, or text that you want to display while the connection is made, so that the user knows that the server is processing.
With this method call $.ajax({ starts the AJAX part.
Ajax is just right for loading content from the server without having to refresh the page. Here the parameters defined in the variables above will be used.
The perhaps most important part is success: function(returnhtml){ . Here is the so-called callback. The function that runs when the AJAX request receives data back from the server. The html is passed in the variable returnhtml .
In this example, the first line hides the image that was showing during the request. The second line is what you are looking for, that is $("#result").html(returnhtml); that will insert the new content in the DOM element with the ID result
