Wednesday, 15 December 2010

Very simple Form submitting using AJAX

I wrote this module very long time ago, but I find it very simple and useful for people that want to build ajax applications quickly in their application, so I decided to publish it.

this module will be used mainly to post the content of a form and receive the response from server. it recognizes the fields and parses the server response automatically.

all you need is to include the javascript code to your page:

<script language="javascript" src="js/ajaxClass.js"></script>

and call the function at the end of your page:

function submitForm() {
ajaxObject.submitForm('myForm', 'spanResponseContainer', 'ajax-loader.gif');

myForm: your Form's id or name
spanResponseContainer: an Span as container for server response
ajax-loader.gif: the path to an image to show while waiting for server response, see this post if you don't know, where to get such an image.

here is the whole sample:


    <title>.:: Simple Ajax Test ::.</title>
  <script language="javascript" src="js/ajaxClass.js"></script>


<form action="/myserver/sayHello.jsp" name="myForm" method="post" onsubmit="submitForm(); return false;">
                <td>Enter your name:</td>
                <td align="left">
                    <input type="text" name="textName" size="20" value="" />
        <input type="submit" value="send">
<br />
<br />
<span id="spanResponseContainer"></span>

<script language="JavaScript">
function submitForm() {
ajaxObject.submitForm('myForm', 'spanResponseContainer', 'ajax-loader.gif');


you can download the script from here

No comments:

Post a Comment