Products
Services
Contact Us

Scripts: Javascript :: Ajax functions :: Library Article #18

Developer's Section

Submit a Form using AJAX
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2012)
Favorites:

Learn simple techniques to submit a form using AJAX.

In this tutorial we will learn how to Submit a form using javascript and AJAX.

Example:

MY FORM:
What is your favorite hobby or pastime?
Which of these places are you attracted to?
The Beach
The Desert
The Jungle
Select your best destination using a powerful spacecraft:
Travel to the center of the Earth
Travel to Space
How do you imagine the future?
SEE MY AJAX FORM RESULTS HERE:



Here are the 5 steps to using AJAX when submitting a form. (Don't forget to check our downloads page at the end of this tutorial for the required ajax libraries, and icons.)

 Code Snippet 1

<!-- 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>  


And the final Step is to create an additional file ( which in this case is going to be the server's response page.)


See other Scripts in Ajax functions

 

Submit Your Scripts:


System Message:
  • Your Javascript script has been sent. Please allow 48 hours for processing.


If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]