More Geeky stuff, sorry folks! I’ll do some Kai related stuff soon

After getting stuck in to AJAX, I summised (as others probably have done) that using it to submit a form and give feedback would make the whole process of completing forms online alot more ‘friendly’. Its actually not hard to do, although the example I’m going to show you is no where near polished since its really just a proof of concept.

include the prototype library

<script type="text/javascript" src="prototype.js"></script>

Ok, pretty painless so far, heres a very basic example form.

<div id="contact">
<textarea name="message" cols="40" rows="10" id="message"></textarea>
<input type=”button” name=”Submit” value=”send it” onclick=’ajaxSubmit()’/>
</div>

See the lack of <form> tag? Thats intentional since we dont want the form tag to define how we handle form submissions, we want the function triggered ‘onclick’ of the button named submit to do that.

Heres the code for that function

function ajaxSubmit(){
new Ajax.Updater(’contact’, ‘email.php?message=’ + document.getElementById(”message”).value, {asynchronous:true});
}

When the function is called by clicking the submit button it sends whatevers in the textarea to a script called email.php which (and I’m not going through this here) gathers the form data and emails it to you then prints a nice ‘thank you’ message on screen which, thanks to Ajax.Updater, actually shows up inside the div called ‘contact’ on the original page.

…and thats really about all there is to it. At this point you have a form which can be filled in by a user, be processed and return a ‘thank you’ message all within the same initial page. Obviously there are a million bells and whistles that can be added such as support for people with javascript turned off, status indicators, more input fields etc but I’ll let you figure those out for yourself.