Web Development TutorialsWritten By Peter Kelly

In this tutorial I will show you how to submit a form using ajax and return the response into a form field. I will use an example to convert the first form field text into capitals. So here we go.

Lets get the hard bit out of the way. First we will create the javascript, and all lines are commented as usual.

<script type="text/javascript"><!--mce:0--></script>

There are 5 states of a httpObject. These are
0 – Not Started
1 – Loading
2 – Loaded
3 – Interactive
4 – Complete

Now we have the Javascript done we need to create the form which will be submitted.

<form>
Input text:
<input id="inputText" onkeyup="doWork();" name="inputText" type="text" />
Output text:
<input id="outputText" name="outputText" type="text" />
</form>

Ok so now we’ve got the javascript and HTML form all on form.html but as you will know if youve read through the javascript there is a file mentioned called upperCase.php this is the file which will do the actual work. This is a simple bit now

upperCase.php

So now you should have 2 files form.html and upperCase.php all in the same folders. Now all you have to do is test it. Upload the files and type something in the input field and watch what happens.

So that’s it should you have any more questions or have any feedback please leave a comment.