<!-- 1: Include ajax libraries and effects -->
<script type="text/javascript" 
src="http://www.yoursite.com/yourjsfolder/prototype.js"></script>
<script type="text/javascript" 
src="http://www.yoursite.com/yourjsfolder/scriptaculous.js"></script>

<!-- 2: Include updater object & AJAX Icon -->

<script type="text/javascript"> 

function submitForm() 
{ 
    showAjaxImage()
    
    //create the ajax updater object 
    new Ajax.Updater('update_content','yourscriptsfolder/f.php',{   
    method:'post', 
    parameters: $('submit_form').serialize(true), 
    evalScripts : true, 
    onSuccess: function(){  
    var mySpan = document.getElementById("ajaxIndicator"); 
    mySpan.innerHTML = "" 

    }, 
    onFailure : function(){  
    alert("Something went wrong..."); 
    } 
    });     

} 


function showAjaxImage() {

   
var mySpan = document.getElementById("ajaxIndicator"); 
    mySpan.innerHTML = "<img src=\"" + 
    "yourimagefolder/ajax-loader.gif" + 
    "\" border=0>"; 
                       
}

</script>

<table border="0">  
  <tr><td>  
  <div id="ajax_form">  
  <table>  
    <tr><td>  
    <!-- 3: Create a Form -->  
    <b>MY FORM:</b>  
    <form name="submit_form" id="submit_form" method="POST">  
    <table border="0">  
      <tr>
        <td>What is your favorite hobby or pastime?</td>  
      </tr>
      <tr>  
        <td><input type="text" name="favHobby"></td>
      </tr>  
      <tr>
        <td>Which of these places are you attracted to?</td>
      </tr>  
      <tr>
        <td>  
        <input type="checkbox" name="thebeach" value="the beach">  
        The Beach<br>  
        <input type="checkbox" name="thedesert" value="the desert">  
        The Desert<br>  
        <input type="checkbox" name="thejungle" value="the jungle">  
        The Jungle  
        </td>
      </tr>  
      <tr>
        <td>Select your best destination using a powerful spacecraft:</td>
      </tr>  
      <tr>  
        <td>  
        <input type="radio" name="tvlchoice"   
                       value="Travel to the center of the Earth">  
        Travel to the center of the Earth<br>  
        <input type="radio" name="tvlchoice" value="Travel to Space">  
        Travel to Space<br>  
        </td>
      </tr>  
      <tr>
        <td>How do you imagine the future?</td>
      </tr>  
      <tr>
        <td><textarea name="mydream" cols=20 rows=5></textarea></td>  
      </tr>
      <tr>  
        <td>  
          <table border="0">  
          <tr>
            <td valign="middle" height="30">  
            <input type="button" id="updatable_bttn" value="Submit"   
            onClick="submitForm();"></td>
            <td valign="middle" height="30">  
            <span id="ajaxIndicator"></span></td>
          </tr>  
          </table>                 
        </td>
      </tr>  
      </table>  
      </form>   
    </td></tr>  
  </table>  
  </div>  
  </td><td>     
  </td><td valign="top">  
  <!-- 4: Create Updatable Content Div -->  
  <div id="update_content">  
    <table  style="border-collapse: collapse; border: 1px solid #FFFABD;">  
    <tr><td bgcolor="#FFFFCC">  
    <b>SEE MY AJAX FORM RESULTS HERE:</b>  
    <br><br>
    </td></tr>  
    </table>  
  </div>  
  </td><tr>  
</table>