AJAX Plugin - NEED HELP!! :-)

Hiya,

I was just wondering if someone could help me with a little something.

I am currently trying to create a plugin that will wrap around a form and using AJAX will check certain things on the fly. I am pretty sure I have all the AJAX code sorted and can get this to work if it is hard-coded into the page but not too sure how I would go about getting this into a plugin which gets called when someone types in a field?

At the moment let’s take an example (don’t want to give too much away now!! 😊 ).

Let’s say I have a simple form with a text field for ‘Type of animal’ in it. I now have some very simple javascript in the head of the html page that basically says when the user has finished typing into this field and tabs out of the field then call a file called animals.php. This PHP file would then do some checks and if the person has placed in a correct answer such as cat then it would return a piece of text to the same page informing the user that they have made a valid choice. This would then allow them to submit the form.

If on the other hand they placed say the word car into the field then the animals.php file would throw back an error message instead and would not allow the form to be submitted.

As I said before I am pretty sure that I can get all of this working except for the stopping the form submitting even if they do put in a wrong answer but I have no idea how I would place all of this into a plugin that can be wrapped around a form?

What I would like to end up with is something like this :

{exp:check_animal}

<fieldset>
<legend>Animal Form</legend>
<form action="index.html" method="post">
<label for="animal">Type Of Animal:</label>
<input type="text" name="animal" id="animal" />
<span>loading.gif</span>
<span></span>
<input type="submit" name="submit" value="Check Animal Type" />
</form>
</fieldset>

{/exp:check_animal}

So basically the plugin could effectively wrap around any sort of form and then the rest would be as I can code it into a normal html page. Really not sure where to start with this one as I will need a tag which will go into the head of the document for the Javascript dependencies and then some way of calling the PHP file etc…

Any help with this would be greatly appreciated.

Best wishes,

Mark